In this section, we will learn what the overflow property is and how to use it in CSS.
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.
CSS overflow Property Syntax
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.