Overflow

Utilities for overflow behavior (clipping or scrolling overflow content).

Quick reference

Class	Styles
af-overflow-hidden	overflow: hidden
af-overflow-auto	overflow: auto
af-overflow-scroll	overflow: scroll
af-overflow-visible	overflow: visible
af-overflow-x-auto	overflow-x: auto
af-overflow-y-auto	overflow-y: auto

Examples

Horizontal scrolling

Item 1Item 2 Item 3Item 4 Item 5

<div class="af-overflow-x-auto af-scrollbar" style="max-width: 18rem; white-space: nowrap;">
  <span class="af-badge">
    Item 1
  </span>
  <span class="af-badge">
    Item 2
  </span>
  <span class="af-badge">
    Item 3
  </span>
  <span class="af-badge">
    Item 4
  </span>
  <span class="af-badge">
    Item 5
  </span>
</div>

Clip overflow (hidden)

This is clipped

<div class="af-overflow-hidden af-border af-radius-md" style="height: 4rem;">
  <div class="af-bg-muted" style="height: 6rem; padding: 1rem;">
    This is clipped
  </div>
</div>

Scroll overflow (auto)

Scroll me

<div class="af-overflow-auto af-scrollbar af-border af-radius-md" style="height: 4rem; padding: 1rem;">
  <div style="height: 8rem;">
    Scroll me
  </div>
</div>

Always show scrollbars (scroll)

Scroll me

<div class="af-overflow-scroll af-scrollbar af-border af-radius-md" style="height: 4rem; padding: 1rem;">
  <div style="height: 8rem;">
    Scroll me
  </div>
</div>

Let overflow show (visible)

I overflow

<div class="af-overflow-visible af-border af-radius-md" style="height: 4rem; padding: 1rem;">
  <span class="af-badge" style="display: inline-block; transform: translateY(2.25rem);">
    I overflow
  </span>
</div>

Vertical scrolling (overflow-y-auto)

Scroll me

<div class="af-overflow-y-auto af-scrollbar af-border af-radius-md" style="height: 4rem; padding: 1rem;">
  <div style="height: 8rem;">
    Scroll me
  </div>
</div>

For scroll behavior and styled scrollbars, see:

• Scroll behavior
• Scrollbar

Responsive variants

Responsive variants are generated for af-overflow-hidden only (e.g. af-overflow-hidden@md). The other overflow utilities do not currently have responsive variants.

See Responsive Suffix for syntax and breakpoints.

Related

• Scrollbar