Overflow

Overflow utilities control how content that exceeds its container is handled. Set overflow for both axes at once, or target overflow-x and overflow-y independently.

Overflow

Use overflow-auto to add scrollbars only when needed, overflow-hidden to clip content, overflow-visible to let content overflow, and overflow-scroll to always show scrollbars.

<div class="overflow-hidden border rounded-sm p-2 w-50 mb-3">
  <p class="text-nowrap">overflow-hidden clips this very long line of text that extends beyond the w-50 container.</p>
</div>

<div class="overflow-auto border rounded-sm p-2 w-50">
  <p class="text-nowrap">overflow-auto shows a scrollbar when this long line of text exceeds the w-50 container.</p>
</div>

overflow-hidden clips this very long line of text that extends beyond the w-50 container.

overflow-auto shows a scrollbar when this long line of text exceeds the w-50 container.

Directional overflow

Use overflow-x-auto and overflow-y-auto to enable directional scrolling. Similarly, overflow-x-hidden, overflow-x-visible, overflow-x-scroll and their -y- counterparts target a single axis.

<div class="overflow-x-auto border rounded-sm p-2">
  <table>
    <thead>
      <tr>
        <th>Column 1</th><th>Column 2</th><th>Column 3</th>
        <th>Column 4</th><th>Column 5</th><th>Column 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td><td>Data</td><td>Data</td>
        <td>Data</td><td>Data</td><td>Data</td>
      </tr>
    </tbody>
  </table>
</div>

Column 1	Column 2	Column 3	Column 4	Column 5	Column 6
Data	Data	Data	Data	Data	Data

Reference

Class	Property	Responsive
`.overflow-auto`	`overflow: auto`	No
`.overflow-hidden`	`overflow: hidden`	No
`.overflow-visible`	`overflow: visible`	No
`.overflow-scroll`	`overflow: scroll`	No
`.overflow-x-auto`	`overflow-x: auto`	No
`.overflow-x-hidden`	`overflow-x: hidden`	No
`.overflow-x-visible`	`overflow-x: visible`	No
`.overflow-x-scroll`	`overflow-x: scroll`	No
`.overflow-y-auto`	`overflow-y: auto`	No
`.overflow-y-hidden`	`overflow-y: hidden`	No
`.overflow-y-visible`	`overflow-y: visible`	No
`.overflow-y-scroll`	`overflow-y: scroll`	No