ContextQMD
Back to Tailwindcss

Overflow

src/docs/overflow.mdx

latest39.6 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "overflow"; export const description = "Utilities for controlling how an element handles content that is too large for the container.";

<ApiTable rows={[ ["overflow-auto", "overflow: auto;"], ["overflow-hidden", "overflow: hidden;"], ["overflow-clip", "overflow: clip;"], ["overflow-visible", "overflow: visible;"], ["overflow-scroll", "overflow: scroll;"], ["overflow-x-auto", "overflow-x: auto;"], ["overflow-y-auto", "overflow-y: auto;"], ["overflow-x-hidden", "overflow-x: hidden;"], ["overflow-y-hidden", "overflow-y: hidden;"], ["overflow-x-clip", "overflow-x: clip;"], ["overflow-y-clip", "overflow-y: clip;"], ["overflow-x-visible", "overflow-x: visible;"], ["overflow-y-visible", "overflow-y: visible;"], ["overflow-x-scroll", "overflow-x: scroll;"], ["overflow-y-scroll", "overflow-y: scroll;"], ]} />

Examples

Showing content that overflows

Use the overflow-visible utility to prevent content within an element from being clipped:

<Figure> <Example> { <div className="relative mx-auto flex max-w-sm items-center gap-6 overflow-visible rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800"> 
  <div className="flex flex-col py-5 pl-24">
    <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
    <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
  </div>
</div>

} </Example>

html
<!-- [!code classes:overflow-visible] -->
<div class="overflow-visible ...">
  <!-- ... -->
</div>
</Figure>

Note that any content that overflows the bounds of the element will then be visible.

Hiding content that overflows

Use the overflow-hidden utility to clip any content within an element that overflows the bounds of that element:

<Figure> <Example> { <div className="relative mx-auto flex max-w-sm items-center gap-6 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800"> 
  <div className="flex flex-col py-5 pl-24">
    <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
    <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
  </div>
</div>

} </Example>

html
<!-- [!code classes:overflow-hidden] -->
<div class="overflow-hidden ...">
  <!-- ... -->
</div>
</Figure>

Scrolling if needed

Use the overflow-auto utility to add scrollbars to an element in the event that its content overflows the bounds of that element:

<Figure hint="Scroll vertically"> <Example> { <div className="relative mx-auto flex h-72 max-w-sm flex-col divide-y divide-gray-200 overflow-auto rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:divide-gray-200/5 dark:bg-gray-800"> <div className="flex items-center gap-4 p-4"> 
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Debra Houston</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Analyst</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Jane White</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Director, Marketing</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Ray Flint</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical Advisor</span>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:overflow-auto] -->
<div class="overflow-auto ...">
  <!-- ... -->
</div>
</Figure>

Unlike overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

Scrolling horizontally if needed

Use the overflow-x-auto utility to allow horizontal scrolling if needed:

<Figure hint="Scroll horizontally"> <Example padding={false}> { <div className="mx-auto max-w-md min-w-0 bg-white shadow-xl dark:bg-gray-800"> <div className="flex overflow-x-auto"> <div className="flex-none px-3 py-6 first:pl-6 last:pr-6"> <div className="flex flex-col items-center justify-center gap-3"> 
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Andrew</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Emily</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Whitney</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">David</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Kristin</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Sarah</strong>
      </div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:overflow-x-auto] -->
<div class="overflow-x-auto ...">
  <!-- ... -->
</div>
</Figure>

Scrolling vertically if needed

Use the overflow-y-auto utility to allow vertical scrolling if needed:

<Figure hint="Scroll vertically"> <Example> { <div className="relative mx-auto flex h-72 max-w-sm flex-col divide-y divide-gray-200 overflow-y-auto rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:divide-gray-200/5 dark:bg-gray-800"> <div className="flex items-center gap-4 p-4"> 
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Debra Houston</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Analyst</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Jane White</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Director, Marketing</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Ray Flint</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical Advisor</span>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:overflow-y-auto] -->
<div class="h-32 overflow-y-auto ...">
  <!-- ... -->
</div>
</Figure>

Scrolling horizontally always

Use the overflow-x-scroll utility to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system:

<Figure hint="Scroll horizontally"> <Example padding={false}> { <div className="mx-auto max-w-md min-w-0 bg-white shadow-xl dark:bg-gray-800"> <div className="flex overflow-x-scroll"> <div className="flex-none px-3 py-6 first:pl-6 last:pr-6"> <div className="flex flex-col items-center justify-center gap-3"> 
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Andrew</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Emily</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Whitney</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">David</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Kristin</strong>
      </div>
    </div>
    <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
      <div className="flex flex-col items-center justify-center gap-3">
        
        <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Sarah</strong>
      </div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:overflow-x-scroll] -->
<div class="overflow-x-scroll ...">
  <!-- ... -->
</div>
</Figure>

Scrolling vertically always

Use the overflow-y-scroll utility to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system:

<Figure hint="Scroll vertically"> <Example> { <div className="relative mx-auto flex h-72 max-w-sm flex-col divide-y divide-gray-200 overflow-y-scroll rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:divide-gray-200/5 dark:bg-gray-800"> <div className="flex items-center gap-4 p-4"> 
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Debra Houston</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Analyst</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Jane White</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Director, Marketing</span>
    </div>
  </div>
  <div className="flex items-center gap-4 p-4">
    
    <div className="flex flex-col">
      <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Ray Flint</strong>
      <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical Advisor</span>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:overflow-y-scroll] -->
<div class="overflow-y-scroll ...">
  <!-- ... -->
</div>
</Figure>

Scrolling in all directions

Use the overflow-scroll utility to add scrollbars to an element:

<Figure hint="Scroll vertically and horizontally"> <Example padding={false}> { <div className="overflow-hidden dark:bg-gray-800"> <div className="grid max-h-90 grid-cols-[70px_repeat(7,150px)] grid-rows-[auto_repeat(16,50px)] overflow-scroll"> <div className="sticky top-0 z-10 col-start-1 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"></div> <div className="sticky top-0 z-10 col-start-2 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"> Sun </div> <div className="sticky top-0 z-10 col-start-3 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"> Mon </div> <div className="sticky top-0 z-10 col-start-4 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"> Tue </div> <div className="sticky top-0 z-10 col-start-5 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"> Wed </div> <div className="sticky top-0 z-10 col-start-6 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"> Thu </div> <div className="sticky top-0 z-10 col-start-7 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"> Fri </div> <div className="sticky top-0 z-10 col-start-8 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"> Sat </div> <div className="sticky left-0 col-start-1 row-start-2 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 5 AM </div> <div className="col-start-2 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-2 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-3 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 6 AM </div> <div className="col-start-2 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-3 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-4 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 7 AM </div> <div className="col-start-2 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-4 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-5 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 8 AM </div> <div className="col-start-2 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-5 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-6 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 9 AM </div> <div className="col-start-2 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-6 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-7 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 10 AM </div> <div className="col-start-2 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-7 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-8 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 11 AM </div> <div className="col-start-2 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-8 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-9 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 12 PM </div> <div className="col-start-2 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-9 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-10 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 1 PM </div> <div className="col-start-2 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-10 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-11 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 2 PM </div> <div className="col-start-2 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-11 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-12 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 3 PM </div> <div className="col-start-2 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-12 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-13 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 4 PM </div> <div className="col-start-2 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-13 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-14 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 5 PM </div> <div className="col-start-2 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-14 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-15 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 6 PM </div> <div className="col-start-2 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-15 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-16 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 7 PM </div> <div className="col-start-2 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-16 border-b border-gray-100 dark:border-gray-200/5"></div> <div className="sticky left-0 col-start-1 row-start-17 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800"> 8 PM </div> <div className="col-start-2 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-3 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-4 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-5 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-6 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-7 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div> <div className="col-start-8 row-start-17"></div> <div className="col-start-3 row-span-4 row-start-2 m-1 flex flex-col rounded-lg border border-blue-700/10 bg-blue-400/20 p-1 dark:border-sky-500 dark:bg-sky-600/50"> <span className="text-xs text-blue-600 dark:text-sky-100">5 AM</span> <span className="text-xs font-medium text-blue-600 dark:text-sky-100">Flight to Vancouver</span> <span className="text-xs text-blue-600 dark:text-sky-100">Toronto YYZ</span> </div> <div className="col-start-4 row-span-4 row-start-3 m-1 flex flex-col rounded-lg border border-purple-700/10 bg-purple-400/20 p-1 dark:border-fuchsia-500 dark:bg-fuchsia-600/50"> <span className="text-xs text-purple-600 dark:text-fuchsia-100">6 AM</span> <span className="text-xs font-medium text-purple-600 dark:text-fuchsia-100">Breakfast</span> <span className="text-xs text-purple-600 dark:text-fuchsia-100">Mel's Diner</span> </div> <div className="col-start-7 row-span-3 row-start-14 m-1 flex flex-col rounded-lg border border-pink-700/10 bg-pink-400/20 p-1 dark:border-indigo-500 dark:bg-indigo-600/50"> <span className="text-xs text-pink-600 dark:text-indigo-100">5 PM</span> <span className="text-xs font-medium text-pink-600 dark:text-indigo-100">🎉 Party party 🎉</span> <span className="text-xs text-pink-600 dark:text-indigo-100">We like to party!</span> </div> </div> </div> } </Example>
html
<!-- [!code classes:overflow-scroll] -->
<div class="overflow-scroll ...">
  <!-- ... -->
</div>
</Figure>

Unlike overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.

Responsive design

<ResponsiveDesign property="overflow" defaultClass="overflow-auto" featuredClass="overflow-scroll" />