CSS overflow property helps us in situations when the content of an element goes out of its boundaries. Now, how that overflowing content should be handled is controlled by the overflow property.
The overflow property allows us to specify whether the overflowed content should be clipped, or scroll bars should be added to display the overflowing content.
In this CSS tutorial, we will discuss various techniques to handle such overflowing content in detail.
The overflow property can accept the following values:
- visible
- hidden
- scroll
- auto
Let’s discuss each value in detail:
CSS Overflow Visible
Every HTML element has overflow value visible by default.
If an element has overflow:visible;, the overflowing content is not clipped at all. Therefore, the content can flow out of the element’s boundaries and is displayed normally. Try out the below example to check how it works:
Example:
div{
overflow: visible;
width: 300px;
height: 100px;
border: 2px solid blue;
}
CSS Overflow Hidden
If an element has overflow:hidden;, its content, which goes out of its boundaries is completely clipped. Refer to the example below:
Example:
div{
overflow: hidden;
width: 300px;
height: 100px;
border: 2px solid blue;
}
CSS Overflow Scroll
Setting overflow property to scroll adds horizontal and vertical scroll bars to the element and the overflowing content is wrapped into the element’s boundary. Refer to the example below:
Example:
div{
overflow: scroll;
width: 300px;
height: 100px;
border: 2px solid blue;
}
The problem with the overflow:scroll; is that it adds both horizontal and vertical scroll bars to the element even if the content is not flowing out of the element’s boundaries. See the example below:
Example:
div{
overflow: scroll;
width: 300px;
height: 100px;
border: 2px solid blue;
}
CSS Overflow Auto
The overflow: auto; is almost similar to overflow: scroll; except that it adds scroll bars only if needed. Like overflow: scroll;, it does not add scroll bars if the content is not flowing out of the element’s boundaries. Try out the example below to see how it works:
Example:
div{
overflow: auto;
width: 300px;
height: 100px;
border: 2px solid blue;
}
CSS overflow-x and overflow-y
CSS overflow-x and overflow-y properties allow us to specify overflow properties for horizontal and vertical axis separately.
Example:
div{
overflow-x: hidden;
overflow-y: scroll;
}
All Overflow Properties
| Property | Description |
| overflow | Specifies how the overflowing content should be handled. |
| overflow-x | Specifies how the horizontally(left or right) overflowing content should be handled. |
| overflow-y | Specifies how the vertically(top or bottom) overflowing content should be handled. |
