The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Set overflow by logical axis | .panel { overflow-block: auto; overflow-inline: clip; } | View examples |
| Scroll only when needed | .results { max-block-size: 24rem; overflow: auto; } | View examples |
| Extend the clip edge | .art { overflow: clip; overflow-clip-margin: 1rem; } | View examples |
| Hide visual scrollbars | .viewport { overflow: hidden; } | View examples |
| Reserve scrollbar space | .feed { overflow: auto; scrollbar-gutter: stable; } | View examples |
| Contain scroll chaining | .dialog__body { overscroll-behavior: contain; } | View examples |
| Opt out of scroll anchoring | .live-region { overflow-anchor: none; } | View examples |
| Ellipsize one line | .label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} | View examples |
| Break emergency text | .message { overflow-wrap: anywhere; } | View examples |
| Clamp a text block | .summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
} | View examples |
| Allow two-axis resizing | .workspace { resize: both; overflow: auto; } | View examples |
| Resize in the inline axis | .sidebar {
resize: inline;
overflow: auto;
min-inline-size: 12rem;
} | View examples |
| Label a focusable region | <section tabindex="0" role="region" aria-label="Build log"> | View examples |
| Expose scroller focus | .log:focus-visible {
outline: 3px solid CanvasText;
outline-offset: 2px;
} | View examples |
Overflow is not merely visual clipping: it determines scroll containers, keyboard access, sticky positioning contexts, and programmatic scrolling. Choose the least destructive behavior, preserve access to hidden content, and let text and controls grow under zoom, translation, and user resizing.
Step by step
Detailed examples
Distinguish scrolling from clipping
overflow:auto and scroll create a scroll container; hidden also establishes one even though user-agent scrolling controls are absent. clip forbids scrolling and does not establish a formatting context by itself. When one physical axis is visible or clip and the other is scrollable, computed-value rules can change it to auto or hidden. Bound the relevant dimension, and use display:flow-root separately if containment of floats is the real goal.
.results { max-block-size: 24rem; overflow: auto; scrollbar-gutter: stable; }
.art-crop { overflow: clip; overflow-clip-margin: .75rem; display: flow-root; }
@supports (overflow-block: auto) {
.results { overflow: visible; overflow-block: auto; overflow-inline: clip; }
}Stabilize scrollbars and nested scrolling
scrollbar-gutter:stable reserves space for classic scrollbars but does not add space for overlay scrollbars. overscroll-behavior controls boundary actions and scroll chaining; contain keeps local overscroll effects, while none also suppresses them. Scroll anchoring normally protects the viewport from content inserted above; opt out only for a region where it causes a specific interaction problem.
.dialog__body {
max-block-size: min(70vh, 40rem);
overflow: auto;
scrollbar-gutter: stable;
overscroll-behavior: contain;
}
.chat__incoming { overflow-anchor: none; }Treat truncation as a visual presentation only
text-overflow signals clipped inline overflow; it does not itself create overflow or prevent wrapping. The familiar ellipsis pattern needs no wrapping plus clipping. Multi-line clamping remains an evolving area; the legacy -webkit-line-clamp combination is broadly implemented but hides content visually. Keep the full accessible text, provide expansion when content matters, and prefer wrapping long identifiers with overflow-wrap:anywhere.
.file-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.commit-id { overflow-wrap: anywhere; }
.summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.summary[aria-expanded="true"] { display: block; overflow: visible; }Let users resize constrained work areas
resize applies only when overflow is neither visible nor clip. both, horizontal, and vertical are established choices; block and inline are logical-axis additions whose support should be checked. Supply sensible min/max sizes, avoid placing the handle beneath another layer, and persist user choices only when the reset path is obvious. Native textareas are resizable by default in many browsers—do not disable that without a replacement.
.workspace {
inline-size: 28rem; block-size: 16rem;
min-inline-size: 14rem; min-block-size: 8rem;
max-inline-size: 100%; max-block-size: 70vh;
overflow: auto; resize: both;
}
textarea { min-block-size: 8rem; max-inline-size: 100%; }Make important scroll regions discoverable
A nested scroller may be hard to reach or notice with a keyboard, low-vision magnifier, or hidden overlay scrollbar. Modern browsers may automatically focus some scroll containers, but behavior and accessible announcements vary. For an important named region, use a focusable semantic element with role=region and an accessible name, a visible focus style, and no keyboard trap. Avoid clipping focus rings and skip links.
<section class="log" tabindex="0" role="region" aria-labelledby="log-title">
<h2 id="log-title">Build log</h2>
<pre>Compiling assets...
Tests passed.</pre>
</section>
<style>.log { max-block-size: 12rem; overflow: auto; scrollbar-gutter: stable; } .log:focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }</style>Local code tester
Resize and navigate an overflow workspace
Resize the panel from its lower corner, tab to the log, and observe stable scrollbar space and wrapping identifiers.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.