# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/overflow.mdx

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">
      <img
        className="absolute -left-6 h-24 w-24 rounded-full shadow-lg"
        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
      />
      <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">
      <img
        className="absolute -left-6 h-24 w-24 rounded-full shadow-lg"
        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
      />
      <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1605405748313-a416a1b84491?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
            <img
              className="h-18 w-18 rounded-full"
              src="https://images.unsplash.com/photo-1605405748313-a416a1b84491?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
            />
            <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
        />
        <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">
        {/* Calendar frame */}
        <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>
        {/* Calendar contents */}
        <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" />