iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Overflow

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind overflow utilities decide what happens when content does not fit. Hide, scroll, clip, or let it spill — and choose per axis.

Tailwind — overflow utilities

EXAMPLE
<!-- ===== The four behaviours ===== -->
<!-- overflow-visible (default) — content spills out -->
<div class="h-16 w-32 border overflow-visible">
  A long line of text that will spill out of the box.
</div>

<!-- overflow-hidden — content is clipped, no scrollbar -->
<div class="h-16 w-32 border overflow-hidden">
  A long line of text that will be clipped at the edge.
</div>

<!-- overflow-scroll — always show scrollbars (even when not needed) -->
<div class="h-16 w-32 border overflow-scroll">
  Scrollbar always present.
</div>

<!-- overflow-auto — scrollbars appear only when needed -->
<div class="h-16 w-32 border overflow-auto">
  Scrollbar only when content overflows.
</div>

<!-- overflow-clip — like hidden but disables programmatic scrolling -->
<div class="h-16 w-32 border overflow-clip">
  Hard clip. No scrollIntoView. Slightly faster.
</div>

<!-- ===== Per-axis ===== -->
<div class="h-16 w-32 border overflow-x-auto overflow-y-hidden whitespace-nowrap">
  Horizontal scroll, vertical hidden — classic for chip rows.
</div>

<!-- ===== Common patterns ===== -->

<!-- 1. Truncated single line -->
<p class="w-48 overflow-hidden text-ellipsis whitespace-nowrap">
  This text gets a single-line ellipsis.
</p>

<!-- 2. Multi-line clamp -->
<p class="line-clamp-3">
  Tailwind ships line-clamp-1..6. Multi-line ellipsis without flexing custom CSS.
</p>

<!-- 3. Scrollable modal body -->
<div class="fixed inset-0 grid place-items-center bg-black/50">
  <div class="max-h-[80vh] w-full max-w-md overflow-y-auto rounded bg-white p-6">
    <h2 class="text-lg font-semibold">Terms of service</h2>
    <p class="mt-2">... very long content ...</p>
  </div>
</div>

<!-- 4. Sticky table header inside a scroll container -->
<div class="max-h-96 overflow-y-auto">
  <table class="w-full">
    <thead class="sticky top-0 bg-white"><tr><th>Name</th><th>Total</th></tr></thead>
    <tbody>...</tbody>
  </table>
</div>

<!-- 5. Horizontal chip strip -->
<div class="flex gap-2 overflow-x-auto pb-2 [scrollbar-width:thin]">
  <span class="shrink-0 rounded-full bg-slate-100 px-3 py-1">All</span>
  <span class="shrink-0 rounded-full bg-slate-100 px-3 py-1">Pending</span>
  <span class="shrink-0 rounded-full bg-slate-100 px-3 py-1">Shipped</span>
  <!-- shrink-0 stops flex from collapsing the children -->
</div>

<!-- ===== Pitfalls ===== -->
<!-- - overflow-hidden on a container that needs a focus-visible ring -> ring gets clipped -->
<!-- - overflow-scroll always shows the bar -> ugly on macOS; prefer overflow-auto -->
<!-- - Forgetting whitespace-nowrap with text-ellipsis -> wraps, no ellipsis -->
<!-- - line-clamp on display:flex children -> may need to be on a child <span> -->
<!-- - Nested scroll containers eating user wheel scroll -> design with intent -->

Why it matters

Overflow is where layout meets reality. Pick per axis, prefer auto over scroll, and reach for line-clamp before custom CSS. Modal bodies, sticky headers, chip strips — once these patterns are reflex, the layout bugs that survive are real layout bugs, not stray spills.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="overflow-hidden overflow-x-auto">…</div>
Try it Yourself »

Discussion

Loading…