Overflow & Scroll

When content is bigger than its box, you decide what happens: clip it, scroll it, or scroll it only on one axis. Tailwind has a utility for each.

Overflow Basics

<div class="overflow-hidden">clipped, no scrollbars</div>
<div class="overflow-auto">scrollbars only if needed</div>
<div class="h-40 overflow-y-scroll">always-scrollable vertical pane</div>
<div class="overflow-x-auto">horizontal scroll when content is wide</div>

overflow-hidden is also the common fix for clipping rounded corners over a child image. The axis variants (overflow-x-*, overflow-y-*) let you scroll one direction while clipping the other.

A Scroll-Snap Carousel

Scroll-snap turns a plain horizontal scroller into a carousel that locks to each item:

<div class="flex gap-4 overflow-x-auto snap-x snap-mandatory">
  <img class="snap-start shrink-0 w-72 rounded-lg" src="/1.jpg" alt="" />
  <img class="snap-start shrink-0 w-72 rounded-lg" src="/2.jpg" alt="" />
  <img class="snap-start shrink-0 w-72 rounded-lg" src="/3.jpg" alt="" />
</div>

The container declares the snap axis (snap-x) and strictness (snap-mandatory); each item gets snap-start so it aligns to the left edge. shrink-0 stops the flex items from collapsing so the row actually overflows and scrolls.

Stopping Scroll Chaining

Inside a scrollable modal, reaching the end of the inner scroll normally starts scrolling the page behind it. overscroll-contain stops that chain:

<div class="max-h-[80vh] overflow-y-auto overscroll-contain">
  <!-- long modal body; the page underneath stays put -->
</div>

This keeps modals, dropdowns, and chat panels from leaking scroll momentum onto the document.