The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.
The overflow property has the following values:
- visible - Default. The overflow is not clipped. It renders outside the element's box
- hidden - The overflow is clipped, and the rest of the content will be invisible
- scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content
- auto - If overflow is clipped, a scrollbar should be added to see the rest of the content
overflow: visible
By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:
Example
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
Try it Yourself »
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
Example
div {
overflow: hidden;
}
Try it Yourself »
overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):
Example
div {
overflow: scroll;
}
Try it Yourself »
overflow: auto
The auto value is similar to scroll, only it add scrollbars when necessary:
Example
div {
overflow: auto;
}
Try it Yourself »
overflow-x and overflow-y
The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):
overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.
Example
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
Try it Yourself »
All CSS Overflow Properties
Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |
