Overflow

Utilities for controlling the CSS overflow property.

All axes

Class

overflow

overflow-hidden

hidden

overflow-auto

auto

overflow-visible

visible

overflow-scroll

scroll

overflow-clip

clip

Horizontal (overflow-x)

Class

overflow-x

overflow-x-auto

auto

overflow-x-hidden

hidden

overflow-x-scroll

scroll

overflow-x-clip

clip

Vertical (overflow-y)

Class

overflow-y

overflow-y-auto

auto

overflow-y-hidden

hidden

overflow-y-scroll

scroll

overflow-y-clip

clip

Examples

<!-- Scrollable area -->
<div class="overflow-auto" style="max-height: 300px">
  <!-- Long content -->
</div>

<!-- Hide overflowing content (useful for rounded images) -->
<div class="overflow-hidden radius-8">
  <img src="image.jpg" />
</div>

<!-- Horizontal scroll for wide tables -->
<div class="overflow-x-auto">
  <table>...</table>
</div>

<!-- Vertical scroll with fixed height -->
<div class="overflow-y-scroll" style="height: 400px">
  <!-- Content -->
</div>