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="overflow-y:auto max-h:3xs">  ...</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="overflow:hidden min-w:0 text-ellipsis white-space:nowrap">  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:visible@print overflow:auto@sm">...</div>

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