CSS Overflow: Visible, Hidden, Scroll, Auto, Clip

The overflow property tells the browser what to do when a box’s content is bigger than the box itself. It takes five common values — visible, hidden, scroll, auto, and clip — and the difference between them is the difference between a layout that degrades gracefully and one that breaks in production.

By default, every element has overflow: visible. Content that doesn’t fit just spills out of the box, unclipped, often overlapping whatever sits below or beside it. That’s rarely what you want once a box has a fixed height or width, which is why overflow shows up constantly in real layouts — modals, sidebars, code blocks, dropdown menus, anything with a size constraint.

The five values

• visible — the default. Content overflows the box and is fully rendered, unclipped. Fine for most block-level content; a problem the moment a box has overflow: hidden on an ancestor or a fixed height.
• hidden — content beyond the box’s bounds is clipped and simply not rendered. No scrollbar, no way for the user to reach the hidden content unless you scroll the box programmatically with JavaScript. Useful for cropping images, containing floats, and hiding overflow you’re animating away.
• scroll — always shows scrollbars, even when the content fits. Predictable for layouts that shouldn’t reflow when content length changes, but can leave a visible empty scrollbar in the common case.
• auto — shows scrollbars only when content actually overflows. This is what people usually mean when they want “scroll if needed” — it’s the most commonly reached-for value in practice.
• clip — like hidden, but stricter: it also disallows programmatic scrolling, so nothing can ever bring the clipped content back into view. Use it when content should be clipped permanently, with no possibility of a user or script scrolling to reveal it.

overflow is shorthand for overflow-x and overflow-y, which you can set independently — a horizontally-scrolling table wrapper with vertical content clipped is overflow-x: auto; overflow-y: hidden.

Overflow and the box model

To reason about overflow correctly you need to know which box is doing the clipping. That’s determined by the CSS box model: content, padding, border, and margin nest inside each other, and overflow clips at the padding edge, not the content edge — which is why padding stays visible even on a box with overflow: hidden.

A frequent surprise: setting overflow: hidden on a parent to contain floated children also clips anything that legitimately needs to escape the box, like a tooltip or a dropdown positioned with position: absolute. If a component inside a scroll container needs to visually break out of it, overflow: hidden on an ancestor is usually the actual bug, not the dropdown’s positioning.

Scrollable overflow and performance

Any box with overflow: auto or overflow: scroll and actual overflowing content becomes a scroll container — its own scrolling context, separate from the page. Scroll containers are useful for isolating scroll position (a modal’s body scrolls without moving the page behind it) but each one adds work for the browser’s compositor.

Two techniques worth knowing here:

• content-visibility skips layout and paint work for off-screen content inside a scroll container, which matters a lot once a scrolling list gets long.
• Virtual scrolling goes further and only renders the DOM nodes currently in view, rather than relying on the browser to skip painting the rest. For lists in the thousands of rows, virtual scrolling beats overflow: auto on a huge unclipped list every time.

Overflow vs clip-path

overflow: hidden clips to the box’s rectangular padding edge. If you need a non-rectangular clip — a circle, a polygon, an arbitrary shape — that’s a job for clip-path, not overflow. The two are often combined: overflow: hidden to contain layout, clip-path to shape the visible region.

Text overflow is a separate property

overflow: hidden on a text container stops the text from spilling out, but it doesn’t add an ellipsis by itself — that needs text-overflow: ellipsis, which only kicks in when overflow is not visible and white-space: nowrap is set. For multi-line truncation, reach for -webkit-line-clamp instead, which is the standard way to cap text at N lines with a trailing ellipsis.

Overflow vs container queries

It’s easy to conflate “this box overflows” with “this box is too narrow for its content,” but they’re different problems. Container queries let a component adapt its own layout based on the size of its containing box, which often eliminates the overflow in the first place rather than clipping or scrolling around it. Reach for overflow when content genuinely exceeds a fixed viewport (a code block, a chat log); reach for a container query when the real fix is a different layout at a different size.

A quick reference

Value	Renders overflow?	Scrollbar shown	Programmatic scroll allowed
visible	Yes, unclipped	No	N/A
hidden	No	No	Yes
scroll	No	Always	Yes
auto	No	Only if needed	Yes
clip	No	No	No

The takeaway

overflow decides what happens at the edge of a box, and the right value depends on intent: auto for scrollable regions that should only show a scrollbar when needed, hidden for content you want clipped but still reachable via script, clip for content that should never be reachable, and visible when nothing should be constrained at all. Pair it with content-visibility or virtual scrolling once a scroll container gets long, and remember that overflow: hidden on an ancestor is the most common reason an absolutely positioned child mysteriously disappears.