Overflow

Overflow utilities control what happens when content is bigger than its box: overflow-auto scrolls when needed, overflow-hidden clips, overflow-visible lets content spill and overflow-scroll always shows scrollbars. overflow-x-* and overflow-y-* handle each axis separately, ideal for wide tables and side-scrolling rows.

1The four overflow values

overflow-auto, overflow-hidden, overflow-visible and overflow-scroll on boxes of fixed height.

overflow-auto

Our physiotherapy keeps projects moving forward all year round. This secure idea makes your work organised at a fair price. This modern journey shows customers coming back without extra tools. A powerful process helps time back in your day on any device.

overflow-hidden

overflow-visible

overflow-scroll

<div class="row g-3 small">
  <div class="col-6 col-md-3">
    <code>overflow-auto</code>
    <div class="overflow-auto border rounded-lg p-2 bg-surface-3" style="height:100px">
      Our physiotherapy keeps projects moving forward all year round. This secure idea makes your work organised at a fair price. This modern journey shows customers coming back without extra tools. A powerful process helps time back in your day on any device.
    </div>
  </div>
  <div class="col-6 col-md-3">
    <code>overflow-hidden</code>
    <div class="overflow-hidden border rounded-lg p-2 bg-surface-3" style="height:100px">
      Our physiotherapy keeps projects moving forward all year round. This secure idea makes your work organised at a fair price. This modern journey shows customers coming back without extra tools. A powerful process helps time back in your day on any device.
    </div>
  </div>
  <div class="col-6 col-md-3">
    <code>overflow-visible</code>
    <div class="overflow-visible border rounded-lg p-2 bg-surface-3 mb-12" style="height:100px">
      Our physiotherapy keeps projects moving forward all year round. This secure idea makes your work organised at a fair price. This modern journey shows customers coming back without extra tools. A powerful process helps time back in your day on any device.
    </div>
  </div>
  <div class="col-6 col-md-3">
    <code>overflow-scroll</code>
    <div class="overflow-scroll border rounded-lg p-2 bg-surface-3" style="height:100px">
      Our physiotherapy keeps projects moving forward all year round. This secure idea makes your work organised at a fair price. This modern journey shows customers coming back without extra tools. A powerful process helps time back in your day on any device.
    </div>
  </div>
</div>

2Horizontal scroll only

overflow-x-auto with flex-nowrap scrolls a row of cards sideways.

Telehealth

General practice

Lab tests

Dental care

<div class="flex flex-nowrap gap-2 overflow-x-auto pb-2">
  <div class="border rounded-lg p-4 shrink-0" style="width:160px">
    <div class="font-semibold small">
      Telehealth
    </div>
  </div>
  <div class="border rounded-lg p-4 shrink-0" style="width:160px">
    <div class="font-semibold small">
      General practice
    </div>
  </div>
  <div class="border rounded-lg p-4 shrink-0" style="width:160px">
    <div class="font-semibold small">
      Lab tests
    </div>
  </div>
  <div class="border rounded-lg p-4 shrink-0" style="width:160px">
    <div class="font-semibold small">
      Dental care
    </div>
  </div>
  <div class="border rounded-lg p-4 shrink-0" style="width:160px">
    <div class="font-semibold small">
      Dental care
    </div>
  </div>
</div>

3Vertical scroll only

overflow-y-auto and a max-height make a scrolling list.

Felix Delgado
Felix Mensah
Mia Kim
Mateo Carter
Zoe Brennan
Nora Kim

<ul class="list-unstyled border rounded-lg overflow-y-auto mb-0" style="max-height:150px">
  <li class="px-4 py-2 border-b">Felix Delgado</li>
  <li class="px-4 py-2 border-b">Felix Mensah</li>
  <li class="px-4 py-2 border-b">Mia Kim</li>
  <li class="px-4 py-2 border-b">Mateo Carter</li>
  <li class="px-4 py-2 border-b">Zoe Brennan</li>
  <li class="px-4 py-2">Nora Kim</li>
</ul>

4Hidden to clip rounded corners

overflow-hidden on a rounded card clips the image corners.

without

overflow-hidden

<div class="row g-3">
  <div class="col-6">
    <div class="border rounded-xl">
      <img src="../assets/img/photo-1.svg" alt="Not clipped" class="w-full block">
      <div class="p-2 small">
        without
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="border rounded-xl overflow-hidden">
      <img src="../assets/img/photo-2.svg" alt="Clipped" class="w-full block">
      <div class="p-2 small">
        overflow-hidden
      </div>
    </div>
  </div>
</div>

5Wide table

A wide table inside overflow-x-auto scrolls instead of breaking the page.

Order	Customer	City	Date	Status	Total
#PO-3241	Sofia Okafor	Austin	May 23, 2026	Shipped	$473.89
#INV-3256	Ivy Alvarez	Vancouver	Jun 26, 2026	Completed	$717.74

<div class="overflow-x-auto border rounded-lg">
  <table class="table table-sm mb-0 whitespace-nowrap">
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col">Customer</th>
        <th scope="col">City</th>
        <th scope="col">Date</th>
        <th scope="col">Status</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#PO-3241</td>
        <td>Sofia Okafor</td>
        <td>Austin</td>
        <td>May 23, 2026</td>
        <td>Shipped</td>
        <td>$473.89</td>
      </tr>
      <tr>
        <td>#INV-3256</td>
        <td>Ivy Alvarez</td>
        <td>Vancouver</td>
        <td>Jun 26, 2026</td>
        <td>Completed</td>
        <td>$717.74</td>
      </tr>
    </tbody>
  </table>
</div>

6Code block that scrolls

Long lines in a pre with overflow-x-auto stay on one line.

npm run build -- --mode production --out-dir dist/brand-name-15 --base ./ --sourcemap false --emptyOutDir

<pre class="overflow-x-auto bg-surface-3 border rounded-lg p-4 small mb-0"><code>npm run build -- --mode production --out-dir dist/brand-name-15 --base ./ --sourcemap false --emptyOutDir</code></pre>

7Chat window

A fixed height message area with overflow-y-auto above a fixed input.

A reliable routine guides your work organised on any device.

Our dental care connects your work organised for teams of every size.

Our health check-ups brings you focused on what matters wherever you are.

Our dental care lets decisions quicker and clearer with friendly support.

<div class="border rounded-xl flex flex-col" style="height:220px;max-width:22rem">
  <div class="overflow-y-auto p-4 flex flex-col gap-2 grow">
    <div class="self-start bg-surface-3 rounded-lg px-2 py-1 small">
      A reliable routine guides your work organised on any device.
    </div>
    <div class="self-end text-bg-primary rounded-lg px-2 py-1 small">
      Our dental care connects your work organised for teams of every size.
    </div>
    <div class="self-start bg-surface-3 rounded-lg px-2 py-1 small">
      Our health check-ups brings you focused on what matters wherever you are.
    </div>
    <div class="self-end text-bg-primary rounded-lg px-2 py-1 small">
      Our dental care lets decisions quicker and clearer with friendly support.
    </div>
  </div>
  <div class="border-t p-2">
    <label class="sr-only" for="ut-msg-1253">Message</label>
    <input id="ut-msg-1253" type="text" class="form-control form-control-sm" placeholder="Type a message">
  </div>
</div>

8Scrollable tab strip

Pills in a flex-nowrap row with overflow-x-auto for many categories.

<nav class="flex flex-nowrap gap-2 overflow-x-auto pb-1" aria-label="Categories">
  <a href="#" class="btn btn-sm btn-primary rounded-full whitespace-nowrap">All</a> <a href="#" class="btn btn-sm btn-light border rounded-full whitespace-nowrap">Dental</a> <a href="#" class="btn btn-sm btn-light border rounded-full whitespace-nowrap">insights</a> <a href="#" class="btn btn-sm btn-light border rounded-full whitespace-nowrap">Orthopedics</a> <a href="#" class="btn btn-sm btn-light border rounded-full whitespace-nowrap">update</a> <a href="#" class="btn btn-sm btn-light border rounded-full whitespace-nowrap">release</a> <a href="#" class="btn btn-sm btn-light border rounded-full whitespace-nowrap">focused</a> 
</nav>

9Terms box

A long text inside a bordered box with overflow-auto, like a licence agreement.

Terms of use

This friendly launch shows every detail in view from the very first day. This friendly experience shows the whole team on the same page without extra tools. Our physiotherapy keeps projects moving forward at a fair price. A reliable launch brings new ideas to life without extra tools.

Our health check-ups makes your work organised in just a few clicks. A elegant launch gives time back in your day wherever you are. A clear community shows results you can measure on any device. The new online results guides results you can measure without the usual hassle.

Our dental care makes results you can measure all year round. The new online results brings results you can measure in just a few clicks. The new reminders keeps projects moving forward at a fair price. This smart routine lets complex tasks into simple steps for teams of every size.

<div class="border rounded-lg p-4 overflow-auto small bg-surface-3" style="height:130px">
  <h3 class="h6">Terms of use</h3>
  <p>This friendly launch shows every detail in view from the very first day. This friendly experience shows the whole team on the same page without extra tools. Our physiotherapy keeps projects moving forward at a fair price. A reliable launch brings new ideas to life without extra tools.</p>
  <p>Our health check-ups makes your work organised in just a few clicks. A elegant launch gives time back in your day wherever you are. A clear community shows results you can measure on any device. The new online results guides results you can measure without the usual hassle.</p>
  <p class="mb-0">Our dental care makes results you can measure all year round. The new online results brings results you can measure in just a few clicks. The new reminders keeps projects moving forward at a fair price. This smart routine lets complex tasks into simple steps for teams of every size.</p>
</div>

10Visible overflow for a badge

overflow-visible lets a badge stick out of a box that would otherwise clip it.

overflow-hidden5

overflow-visible4

<div class="flex gap-6 pt-2">
  <div class="relative overflow-hidden border rounded-lg p-4 small">
    overflow-hidden<span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full text-bg-danger">5</span>
  </div>
  <div class="relative overflow-visible border rounded-lg p-4 small">
    overflow-visible<span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full text-bg-danger">4</span>
  </div>
</div>

11Hidden overflow for a cropped title

overflow-hidden with a fixed height clips long text to two lines worth of space.

Your health, our priority - This smart idea makes time back in your day with friendly support.

Jan 13, 2026

<div class="border rounded-lg p-4" style="max-width:20rem">
  <div class="overflow-hidden font-semibold leading-tight" style="height:2.5em">
    Your health, our priority - This smart idea makes time back in your day with friendly support.
  </div>
  <div class="small text-muted mt-1">
    Jan 13, 2026
  </div>
</div>

12Sidebar that scrolls separately

The nav column scrolls with overflow-y-auto while the content stays put.

This honest story turns new ideas to life in just a few clicks. The new online results shows decisions quicker and clearer for teams of every size.

<div class="flex border rounded-lg" style="height:180px">
  <nav class="overflow-y-auto border-e p-2 small shrink-0" style="width:130px" aria-label="Chapters">
    <a href="#" class="block py-1">Intro</a><a href="#" class="block py-1">Setup</a><a href="#" class="block py-1">Layout</a> <a href="#" class="block py-1">Colours</a><a href="#" class="block py-1">Forms</a><a href="#" class="block py-1">Tables</a> <a href="#" class="block py-1">Charts</a><a href="#" class="block py-1">Deploy</a> 
  </nav>
  <div class="p-4 small">
    This honest story turns new ideas to life in just a few clicks. The new online results shows decisions quicker and clearer for teams of every size.
  </div>
</div>

13Image pan area

A large image in an overflow-auto box can be scrolled in both directions.

<div class="overflow-auto border rounded-lg" style="height:160px;max-width:26rem">
  <img src="../assets/img/wide-1.svg" alt="How we rebuilt our idea" width="900" height="394" class="block"> 
</div>

14Kanban columns

Columns side by side in overflow-x-auto, each column scrolls with overflow-y-auto.

To do

Health check-ups

Lab tests

Doing

Lab tests

Done

Physiotherapy

<div class="flex gap-2 overflow-x-auto pb-1">
  <div class="bg-surface-3 rounded-lg p-2 shrink-0 overflow-y-auto" style="width:170px;max-height:180px">
    <div class="small font-semibold mb-2">
      To do
    </div>
    <div class="bg-page border rounded-md p-2 small mb-2">
      Health check-ups
    </div>
    <div class="bg-page border rounded-md p-2 small mb-2">
      Health check-ups
    </div>
    <div class="bg-page border rounded-md p-2 small">
      Lab tests
    </div>
  </div>
  <div class="bg-surface-3 rounded-lg p-2 shrink-0 overflow-y-auto" style="width:170px;max-height:180px">
    <div class="small font-semibold mb-2">
      Doing
    </div>
    <div class="bg-page border rounded-md p-2 small">
      Lab tests
    </div>
  </div>
  <div class="bg-surface-3 rounded-lg p-2 shrink-0 overflow-y-auto" style="width:170px;max-height:180px">
    <div class="small font-semibold mb-2">
      Done
    </div>
    <div class="bg-page border rounded-md p-2 small">
      Physiotherapy
    </div>
  </div>
</div>

15Overflow-x hidden

overflow-x-hidden hides content that slides in from the side, like an off-screen panel.

The new certified specialists connects projects moving forward with friendly support.

Panel partly off the edge

<div class="relative overflow-x-hidden border rounded-lg p-4" style="height:110px">
  <div class="small">
    The new certified specialists connects projects moving forward with friendly support.
  </div>
  <div class="absolute top-0 bg-primary-subtle h-full p-2 small" style="left:90%;width:200px">
    Panel partly off the edge
  </div>
</div>

16Overflow-y scroll always

overflow-y-scroll always shows the vertical scrollbar, so the width never jumps.

A secure story makes complex tasks into simple steps all year round.

<div class="overflow-y-scroll border rounded-lg p-2 small" style="height:90px">
  A secure story makes complex tasks into simple steps all year round.
</div>

17Notification panel

A dropdown-like panel with header, scrolling body and footer.

Notifications

Our health check-ups shows you focused on what matters wherever you are.

The new reminders keeps decisions quicker and clearer wherever you are.

This modern routine shows projects moving forward without the usual hassle.

Our dental care lets the whole team on the same page all year round.

View all

<div class="border rounded-lg shadow-sm flex flex-col" style="max-width:20rem;height:220px">
  <div class="px-4 py-2 border-b font-semibold small">
    Notifications
  </div>
  <div class="overflow-y-auto grow">
    <div class="px-4 py-2 border-b small">
      Our health check-ups shows you focused on what matters wherever you are.
    </div>
    <div class="px-4 py-2 border-b small">
      The new reminders keeps decisions quicker and clearer wherever you are.
    </div>
    <div class="px-4 py-2 border-b small">
      This modern routine shows projects moving forward without the usual hassle.
    </div>
    <div class="px-4 py-2 small">
      Our dental care lets the whole team on the same page all year round.
    </div>
  </div>
  <a href="#" class="px-4 py-2 border-t small text-center">View all</a> 
</div>

18Clip a decorative shape

A big circle partly outside its panel is cut off by overflow-hidden.

Feel better with expert care

Our lab tests makes results you can measure for teams of every size.

<div class="relative overflow-hidden text-bg-primary rounded-xl p-6">
  <div class="absolute bg-white/25 rounded-full" style="width:180px;height:180px;right:-60px;top:-60px">
  </div>
  <h3 class="h5 relative">Feel better with expert care</h3>
  <p class="small mb-0 relative">Our lab tests makes results you can measure for teams of every size.</p>
</div>

19Long word handling

overflow-hidden plus text-truncate versus text-break for an unbreakable string.

downloads/brand-name-15/assets/very-long-file-name-without-any-spaces-at-all.zip

<div class="row g-2 small">
  <div class="col-sm-6">
    <div class="border rounded-lg p-2 truncate">
      downloads/brand-name-15/assets/very-long-file-name-without-any-spaces-at-all.zip
    </div>
  </div>
  <div class="col-sm-6">
    <div class="border rounded-lg p-2 break-words">
      downloads/brand-name-15/assets/very-long-file-name-without-any-spaces-at-all.zip
    </div>
  </div>
</div>

20Responsive table wrapper

table-responsive is the helper made of overflow-x-auto for tables.

Plan	Users	Storage	Support	API	Price
Pro	14	259 GB	Email and chat	Unlimited	$62.24

<div class="table-responsive border rounded-lg">
  <table class="table table-sm mb-0 whitespace-nowrap">
    <thead>
      <tr>
        <th scope="col">Plan</th>
        <th scope="col">Users</th>
        <th scope="col">Storage</th>
        <th scope="col">Support</th>
        <th scope="col">API</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pro</td>
        <td>14</td>
        <td>259 GB</td>
        <td>Email and chat</td>
        <td>Unlimited</td>
        <td>$62.24</td>
      </tr>
    </tbody>
  </table>
</div>