In this section, we will learn what the overflow property is and how to use it in CSS.

Click here to run the example of overflow property.

CSS overflow Property Definition and Usage

When we put more content in the box of an element that it can take, overflow occurs.

This especially happens when we set a fixed value for `width` and `height` property of an element.

Note: if we set a fixed value only for `width` and not the `height` property, the content will not overflow because as far as the content goes, the height of the parent element dynamically increases as well.

Now, CSS provided a property called `overflow` which indicates what should be done when an overflow occurs.

The CSS `overflow` property is a shorthand property that is used for controlling the overflow in both horizontal and vertical directions.

Be aware that if you only want to control overflow in horizontal or vertical direction, you can use the overflow-x or overflow-y property, respectively.

CSS overflow Property Syntax

overflow: visible|hidden|scroll|auto|initial|inherit;

CSS overflow Property Value

Here’s the list of values can be used for this property:

• visible: this is the default value and it basically lets the content that passed the boundary of an element to be visible.
• hidden: using this value, any content that passed the boundary of an element will be trimmed or hidden from users.
• scroll: if we set the value to “scroll”, browsers add a scrollbar to the target element so that users can scroll and see the invisible content. (the scrollbar will be with the target element even if there’s no overflow)
• auto: This value pretty much acts the way “scroll” does, except for only showing scrollbars when overflow occurred.

Note: the two global values “initial” and “inherit” can also be used for this property.

Example: overflow in CSS

See the Pen overflow in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: hidden overflow CSS

See the Pen hidden overflow CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: scroll overflow

See the Pen scroll overflow by Omid Dehghan (@enjoytutorials1) on CodePen.