The CSS overflow property
The CSS overflow property decides what happens when content does not fit its box. visible (the default) lets it spill out; hidden clips it; scroll always shows scrollbars; auto shows them only when needed. Use overflow-x and overflow-y to control each direction separately.
Overview
overflow answers a simple question: when an element's content is bigger than the element itself, what should happen? By default the answer is visible — the content just spills outside the box, often over whatever sits below it.
The other values take control. hidden simply clips anything past the edge, which is handy for cropping an image to a rounded container or hiding a decorative overflow. scroll always adds scrollbars, even when the content fits; auto is usually the better choice, adding them only when there is something to scroll. The newer clip is like hidden but forbids all scrolling, including programmatic scrolling.
Two practical notes. Setting overflow to anything other than visible creates a scroll container, which also contains floated children and stops margins escaping — sometimes the real reason people reach for it. And you can split the axes: overflow-x: auto with overflow-y: hidden gives you a horizontal scroller, common for tab strips and image rows on mobile.
Syntax
selector {
overflow: value;
}
/* a scrollable panel */
.panel {
max-height: 200px;
overflow: auto;
}Values
The overflow property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
visible |
Content spills outside the box. The default. |
hidden |
Content past the edge is clipped and cannot be scrolled to. |
scroll |
Scrollbars are always shown, even if the content fits. |
auto |
Scrollbars appear only when the content overflows. Usually the best choice. |
clip |
Like hidden, but forbids all scrolling, including from script. |
Example
<style>
.panel {
max-height: 110px;
overflow: auto;
background: #f5f7fb;
border: 1px solid #d0d7e2;
border-radius: 10px;
padding: 12px 14px;
font: 14px/1.6 system-ui, sans-serif;
}
</style>
<div class="panel">
<p>Scroll me. This panel is capped at 110px tall.</p>
<p>When the content is taller than the box, overflow: auto adds a scrollbar.</p>
<p>Only when it is needed — never when it is not.</p>
<p>Keep going…</p>
<p>…almost there…</p>
<p>That's the bottom.</p>
</div>Best practices
- Prefer
autooverscrollso scrollbars only show when there is actually something to scroll. - Pair
overflow: hiddenwith border-radius to crop child images and content to a rounded shape. - Use
overflow-xandoverflow-yseparately for horizontal scrollers like tab strips and carousels. - Be careful clipping content with
hidden— make sure nothing important (a focus ring, a tooltip, essential text) is being cut off.
Accessibility
A scroll container made with overflow: auto or scroll must be reachable by keyboard. Most browsers make a scrollable region focusable so it can be scrolled with the arrow keys, but if you suppress that, keyboard-only users get stuck. Test that any scrollable panel can be operated without a mouse.
overflow: hidden deserves extra care: clipped content is gone for everyone, including screen-reader users if it is removed from view, and a focus ring clipped at the edge can leave keyboard users unsure where they are. And never rely on hidden overflow to disable zoom or reflow — content still needs to adapt when text is enlarged.
Frequently asked questions
How do I add a scrollbar to a div?
max-height: 200px) and overflow: auto. A scrollbar appears when the content is taller than the box.What is the difference between overflow: scroll and auto?
scroll always shows scrollbars, even when the content fits. auto only shows them when the content actually overflows, which usually looks cleaner.How do I hide content that overflows?
overflow: hidden, which clips anything past the box edge. Combine it with border-radius to crop content to a rounded shape.How do I scroll horizontally only?
overflow-x: auto and overflow-y: hidden. The element scrolls sideways while staying fixed vertically — common for tab strips and image rows.