overflow
Control clipping and scrolling when content exceeds its container.
Overview
| Class | Declarations |
|---|---|
overflow | overflow: visible;
|
overflow:auto | overflow: auto;
|
overflow:hidden | overflow: hidden;
|
overflow:overlay | overflow: overlay;
|
overflow:scroll | overflow: scroll;
|
overflow:clip | overflow: clip;
|
overflow-x:auto | overflow-x: auto;
|
overflow-y:auto | overflow-y: auto;
|
overflow-x:hidden | overflow-x: hidden;
|
overflow-y:hidden | overflow-y: hidden;
|
overflow-x:overlay | overflow-x: overlay;
|
overflow-y:overlay | overflow-y: overlay;
|
overflow-x:scroll | overflow-x: scroll;
|
overflow-y:scroll | overflow-y: scroll;
|
overflow-x:visible | overflow-x: visible;
|
overflow-y:visible | overflow-y: visible;
|
overflow-x:clip | overflow-x: clip;
|
overflow-y:clip | overflow-y: clip;
|
Examples
Hide overflowing content
overflow:hidden clips content to the padding box, including its rounded corners. It creates a scroll container without showing scrollbars: script, focus, or an anchor can still change the scroll position. Use the buttons below to try native programmatic scrolling.
<div class="overflow:hidden h:10rem w:14rem r-md"> <div class="h-3xs w-xs">Content larger than its frame</div></div>Generated CSS
@layer utilities { .overflow\:hidden { overflow: hidden }}Create a scroll container
overflow:auto makes overflowing content scrollable; scrollbar visibility depends on the platform. Axis-specific utilities are useful when the content only overflows vertically or horizontally. Focus either container and use the arrow keys.
<div class="overflow-y:auto h:10rem w:14rem" tabindex="0" aria-label="Vertical collection"> <div class="h-3xs">Tall collection</div></div><div class="overflow-x:auto w:14rem" tabindex="0" aria-label="Horizontal collection"> <div class="h:10rem w-xs">Wide collection</div></div>overflow:overlay is a legacy alias for overflow:auto. Prefer auto in new interfaces.
Clip without scrolling
overflow:clip clips content without creating a scroll container. Unlike hidden, it cannot be scrolled programmatically. Compare the same controls and geometry with the hidden example above.
<div class="overflow:clip h:10rem w:14rem r-md"> <div class="h-3xs w-xs">Content larger than its frame</div></div>clip alone does not establish an independent formatting context. Add flow-root when the layout also needs that boundary. Both clip and hidden can respect rounded corners.
Truncate a single line
A single-line ellipsis needs a constrained block, hidden overflow, and text that cannot wrap. Here the block is 224px wide. A flex or grid item may also need min-w:0 so it can shrink below its content’s minimum width.
<div class="overflow:hidden w:14rem text-ellipsis white-space:nowrap"> A very long file name that should not widen the toolbar</div>Apply conditionally
Use selectors and conditional queries to change the behavior when a state or viewport condition applies. This frame is clipped on narrow screens, scrollable from sm, and visibly overflowing in print. Restrict the width condition to screen so it does not override the print rule.
<div class="overflow:hidden h:10rem w:14rem overflow@print overflow:auto@screen@sm"> <div class="h-3xs w-xs">Content larger than its frame</div></div>Use overscroll-behavior when the problem is scroll chaining rather than clipping.