CSS · Chapter 21 of 44
CSS Overflow
The overflow property controls what happens when content is too large for its container: visible (default, spills out), hidden (clipped), scroll (always shows scrollbars), or auto (scrollbars only when needed).
overflow-x and overflow-y let you control horizontal and vertical overflow independently.
Syntax
overflow: visible | hidden | scroll | auto;Overflow values
visible lets content spill outside the box. hidden clips extra content. scroll always adds scrollbars. auto adds scrollbars only when content overflows.
Axis-specific overflow
overflow-x and overflow-y apply overflow rules to just the horizontal or vertical axis, useful for scrollable panels.
Example 1 (css)
.panel {
height: 150px;
overflow-y: auto;
}Output
A fixed-height panel that scrolls vertically only when content overflowsoverflow-y: auto adds a vertical scrollbar only when the content exceeds 150px.
Key points
- overflow: hidden clips content outside the box.
- overflow: scroll always shows scrollbars.
- overflow: auto shows scrollbars only when needed.
- overflow-x/overflow-y control each axis separately.
💡 Note: overflow: hidden is also commonly used to contain floated children.