Overflow

Overflow utilities control what happens when content exceeds an element's boundaries. You can clip content, show scrollbars, or allow content to flow freely outside the container.

Overflow options

<div class="overflow-auto">
  Adds scrollbars only when content overflows
</div>
<div class="overflow-hidden">
  Clips content — no scrollbars
</div>
<div class="overflow-visible">
  Content flows outside (default behavior)
</div>
<div class="overflow-scroll">
  Always shows scrollbars
</div>
    

Axis-specific overflow

Control horizontal and vertical overflow independently.

<div class="overflow-x-auto overflow-y-hidden">
  Horizontal scroll, vertical hidden
</div>
<div class="overflow-x-hidden overflow-y-auto">
  Horizontal hidden, vertical scroll
</div>
    

Truncating text

A very common pattern is truncating long text with an ellipsis. Tailwind has a dedicated utility for this.

<p class="truncate max-w-xs">
  This is a very long paragraph that will be truncated with an ellipsis
  when it exceeds the container width.
</p>

<p class="line-clamp-2">
  This text will show at most two lines, then truncate with an ellipsis.
  Great for card descriptions and previews.
</p>
    

Practical example

A scrollable sidebar with fixed height is a classic overflow use case.

<aside class="h-screen overflow-y-auto p-4 bg-gray-50">
  <nav class="space-y-2">
    <a class="block p-2 hover:bg-gray-200 rounded">Link 1</a>
    <a class="block p-2 hover:bg-gray-200 rounded">Link 2</a>
    <a class="block p-2 hover:bg-gray-200 rounded">Link 3</a>
  </nav>
</aside>