It is used to manage content which might possibly spread out or overflow the boundaries of containing element’s dimensional constraints. It has an default value of ‘visible’ keyword. It takes following keyword values
- visible
- hidden
- scroll
- auto
This property hides the content if of more size than the space available or to add scroll bars for the extra content. By default this property allows the content overflowing the edges of the containing element. Explanation of all values is given as
| Value | Description |
|
visible |
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 scroll-bar is added to see the rest of the content |
|
auto |
If overflow is clipped, a scroll-bar should be added to see the rest of the content |
It is used as
.top { width: 150px; overflow: hidden; }
.mid { height: 100px; overflow: auto; }
.mid { height: 100px; overflow: auto; }
Overflowing on X or Y axis – The overflow-x and overflow-y property controls the overflow of content for x-axis or y-axis only. They control the overflowing content with a scroll bar and only a vertical scroll bar for the overflow-y property and only a horizontal scroll bar for the overflow-x property. They have default value of ‘visible’. Both the properties accepts values as that of overflow property which are
- visible
- hidden
- scroll
- auto
