CSS overflow property specifies how the overflowing content should be handled within the element, whether it should be clipped, displayed normally or scrollbars should be added to fit the content within the element’s boundary.
In the example below, we have used an image inside the <div> element, which is larger than the <div> itself. Therefore, the image flows out the <div> boundaries. Now, how that overflowing image content should be displayed that we have controlled using the overflow property. Try it out:
Example:
.div1{
overflow: visible;
}
.div2{
overflow: hidden;
}
.div3{
overflow: scroll;
}
.div4{
overflow: auto;
}
It is recommended to use overflow: auto; instead of using overflow: scroll;. Because overflow: auto; adds scroll bars only if it’s required. While overflow: scroll; adds scroll bar even if it is not required. See the example below:
Example:
.div1{
overflow: scroll;
}
.div2{
overflow: auto;
}
CSS Syntax
The overflow property has the below syntax:
overflow: visible|hidden|scroll|auto|initial|inherit;
Property Values
The overflow property accepts the following values:
| visible | The overflowing content is displayed normally. This is the default value. |
| hidden | The overflowing content is clipped completely. |
| scroll | The overflowing content is forced to display inside the containing element’s boundary by adding horizontal and vertical scrolls. It adds scroll bars even if they are not required. |
| auto | It is almost similar to overflow: scroll;. The only difference is that it adds scroll bars only when required. |
| initial | Sets the overflow property to its default value(visible). |
| inherit | Inherits the overflow property from the parent element. |
General Info
| Default Value | visible |
| Inherited | No |
| JavaScript Usage | element.style.overflow = “auto”; |
