overflow

Controlling the desired behavior for an element's overflow.

Overview

Examples

Hide overflowing content

Use overflow:hidden when content should be clipped to the element box.

<div class="overflow:hidden r:md">    ...</div>

@layer utilities {    .overflow\:hidden {        overflow: hidden    }}

Create a scroll container

Use overflow:auto when scrollbars should appear only if content overflows. Use axis-specific utilities when only one direction should scroll.

<div class="max-h:64x overflow-y:auto">    ...</div><div class="overflow-x:auto">    <table>...</table></div>

Clip without scrolling

Use overflow:clip when content should be clipped without creating a scroll container.

<figure class="overflow:clip">    ...</figure>

Use overflow:hidden when you still need scroll-container behavior, clipping for border radius, or compatibility with patterns that depend on hidden overflow.

Truncate a single line

Overflow is often paired with white-space:nowrap and text-overflow:ellipsis for one-line truncation.

<span class="min-w:0 overflow:hidden white-space:nowrap text-overflow:ellipsis">    A very long file name that should not widen the toolbar</span>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="overflow:hidden overflow:auto@sm overflow:visible@print">...</div>

Use overscroll-behavior when the problem is scroll chaining rather than clipping.