CSS Overflow
Learn how to control content that overflows its container using CSS overflow properties
What is CSS Overflow?
The CSS overflow property controls what happens to content that is too big to fit in an element's box. It specifies whether to clip content, add scrollbars, or display the overflowing content.
Overflow Properties:
- overflow - Shorthand for overflow-x and overflow-y
- overflow-x - Controls horizontal overflow
- overflow-y - Controls vertical overflow
- text-overflow - Determines how overflowed text is signaled
- overflow-clip-margin - Defines how far content can overflow before being clipped
Overflow in Action
Example Code
/* Overflow Properties */ .container { /* Basic overflow values */ overflow: visible; /* Default - content is not clipped */ overflow: hidden; /* Content is clipped, no scrollbars */ overflow: scroll; /* Content is clipped, with scrollbars */ overflow: auto; /* Browser decides whether to add scrollbars */ /* Overflow for specific axes */ overflow-x: hidden; /* Control horizontal overflow */ overflow-y: scroll; /* Control vertical overflow */ /* Modern overflow properties */ overflow: clip; /* Similar to hidden but no programmatic scrolling */ overflow: hidden auto; /* x-axis: hidden, y-axis: auto */ } /* Text-specific overflow */ .text-container { white-space: nowrap; /* Prevent text wrapping */ overflow: hidden; /* Hide overflow */ text-overflow: ellipsis; /* Show ellipsis when text overflows */ } /* Customizing scrollbars (WebKit browsers) */ .scroll-container::-webkit-scrollbar { width: 12px; /* Width of vertical scrollbar */ height: 12px; /* Height of horizontal scrollbar */ } .scroll-container::-webkit-scrollbar-track { background: #f1f1f1; /* Color of the tracking area */ } .scroll-container::-webkit-scrollbar-thumb { background: #888; /* Color of the scroll thumb */ border-radius: 6px; /* Roundness of the scroll thumb */ } .scroll-container::-webkit-scrollbar-thumb:hover { background: #555; /* Color on hover */ } /* Standard scrollbar properties (newer) */ .scroll-container { scrollbar-width: thin; /* auto | thin | none */ scrollbar-color: #888 #f1f1f1; /* thumb color, track color */ }
Overflow Properties in Detail
Basic Overflow Values
Scrollable Overflow Values
Axis-Specific Overflow
You can control overflow separately for horizontal and vertical axes using overflow-x and overflow-y properties.
Text Overflow
The text-overflow
property determines how overflowed text content is signaled to users. It only affects text that overflows in the inline direction (horizontally in normal Western text).
text-overflow: ellipsis
Renders an ellipsis ("...") to represent clipped text.
text-overflow: clip
The default value. Text is clipped at the limit of the content area.
Multi-line Text Overflow
For multi-line text overflow, you can use line-clamp (though it"s not part of the official specification yet).
Scrollbar Styling
WebKit Scrollbar Styling
WebKit browsers (Chrome, Safari, Edge) support custom scrollbar styling with pseudo-elements.
Standard Scrollbar Styling
The newer standard approach works in Firefox and newer versions of other browsers.
Values for scrollbar-width:
- auto - Default browser scrollbar
- thin - Thinner scrollbar
- none - No scrollbar visible
Overflow in Different Layouts
Overflow with Flexbox
In flex containers, overflow properties work slightly differently. You often need to set min-width: 0 on flex items to allow them to shrink properly.
Overflow with Grid
CSS Grid items can also have overflow issues. You may need to set min-width: 0 or min-height: 0 on grid items.
Overflow with Positioned Elements
Absolutely positioned elements can overflow their containers. Use overflow: hidden on the container to clip positioned children.
Practical Overflow Examples
Scrollable Content Area
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Horizontal Scrolling Gallery
Truncated Text Components
CSS Overflow Properties Reference
Property | Description | Values |
---|---|---|
overflow | Shorthand property for setting overflow-x and overflow-y | visible | hidden | clip | scroll | auto |
overflow-x | Controls what happens to content that overflows horizontally | visible | hidden | clip | scroll | auto |
overflow-y | Controls what happens to content that overflows vertically | visible | hidden | clip | scroll | auto |
text-overflow | Determines how overflowed text is signaled to users | clip | ellipsis | string |
overflow-clip-margin | Determines how far outside its bounds an element can be painted before being clipped | length | percentage |
scrollbar-width | Sets the width of the scrollbar (standard property) | auto | thin | none |
scrollbar-color | Sets the color of the scrollbar track and thumb (standard property) | auto | color color |
scrollbar-gutter | Controls the presence of scrollbar gutter space | auto | stable | both-edges |
overscroll-behavior | Controls what happens when scrolling reaches the boundary of a scroll container | auto | contain | none |
overscroll-behavior-x | Controls the overscroll behavior along the x-axis | auto | contain | none |
overscroll-behavior-y | Controls the overscroll behavior along the y-axis | auto | contain | none |
scroll-behavior | Controls whether scrolling is instant or animates smoothly | auto | smooth |
scroll-margin | Shorthand for scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left | length |
scroll-padding | Shorthand for scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-left | length | auto |
scroll-snap-type | Sets how strictly snap points are enforced on the scroll container | none | x | y | block | inline | both | mandatory | proximity |
scroll-snap-align | Specifies the snap position of an element within the scroll container | none | start | end | center |
Browser Support Notes:
- Most modern browsers support the basic overflow properties
- overflow: clip is relatively new (supported in Chrome 90+, Firefox 81+, Safari 15+)
- scrollbar-width and scrollbar-color have good support in modern browsers
- WebKit scrollbar styling (::-webkit-scrollbar) works in Chrome, Safari, Edge