CSS Overflow Table
| Value | Overflowing content | Scrollbar |
|---|---|---|
visible (default) | Renders outside the box | No scrollbar - content just paints past the edge |
hidden | Clipped at the box edge | No scrollbar - content inaccessible, use clip for better perf |
scroll | Clipped, scrollbar ALWAYS visible | Even when content fits - the gutter is guaranteed |
auto | Clipped, scrollbar when needed | The pragmatic default for interactive areas |
clip (CSS Overflow 4) | Clipped, NO scroll mechanism | Like hidden but programmatically unscrollable - cheaper |
overflow-x: auto; overflow-y: hidden | Per-axis control | The horizontal-scroll card row pattern |
overflow decides what happens when content doesn't fit its box: it can paint past the edge, get clipped, or get a scrollbar. The table below is the working six values, from the visible default to the modern clip - and the per-axis control that builds horizontal card rows.
Bottom line: overflow: hidden without a scroll mechanism is CONTENT LOSS - the reader cannot reach the clipped part, ever. overflow: clip (CSS Overflow Module Level 3) is the cheaper cousin: same visual result, but the browser knows scrolling is IMPOSSIBLE, so it skips the scroll machinery entirely. When content must be reachable, auto is the honest choice.
The honest part: overflow-x: hidden on a parent BREAKS position: sticky inside it - the sticky element's scroll ancestor changes from the viewport to the overflow container, and if that container doesn't scroll, sticky stops sticking. This is the number one 'why did my sticky header stop working' answer, and the fix is removing the overflow property from the wrapper.
How to use
- Default to overflow: visible (no declaration needed) - content flows freely and nothing is lost.
- Use auto for interactive areas (code blocks, tables, chat panes) - scrollbar appears only when content exceeds the box.
- Use clip for decorative overflow (an image peeking past a card) - cheaper than hidden because the browser skips scroll bookkeeping.
Frequently asked questions
What is the difference between overflow: hidden and overflow: clip?
Both clip content at the box edge, but clip tells the browser that scrolling is IMPOSSIBLE - no scroll mechanism exists, not even programmatically. hidden still creates a scroll container that JavaScript can scroll via scrollTop. The practical difference is performance: clip is cheaper because the browser skips scroll bookkeeping (no scroll region, no compositor layer). clip also supports overflow-clip-margin to control how far content paints past the edge before clipping.
Why does overflow-x: hidden break position: sticky?
Because position: sticky works relative to the nearest scrolling ancestor. overflow-x: hidden on a parent turns that parent into a scroll container - the sticky element now sticks within the parent's scroll context instead of the viewport. If the parent doesn't actually scroll, sticky has nothing to stick against. The fix: remove the overflow property from the wrapper, or use overflow: clip which (in modern browsers) does not create a scroll container.
What is the difference between overflow: hidden and text-overflow: ellipsis?
overflow: hidden clips at the box edge with no visual indicator. text-overflow: ellipsis adds the ... but ONLY works when three conditions are met together: overflow-x: hidden, white-space: nowrap, and a defined width. All three are required; missing any one means the ellipsis never appears. The combo is the standard single-line truncation pattern - the long-form alternative is line-clamp for multi-line truncation with a fallback.
When should I use overflow: scroll instead of overflow: auto?
scroll always shows the scrollbar (or reserves the gutter), even when content fits. auto shows the scrollbar only when content exceeds the box. The choice is visual: scroll prevents layout shift when the scrollbar appears/disappears (the gutter flicker); auto looks cleaner but can shift content by the scrollbar width (15-17px on desktop). The scrollbar-gutter property solves the flicker while keeping auto's cleanliness.