Overflow
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.";
Examples¶
Showing content that overflows¶
Use the overflow-visible utility to prevent content within an element from being clipped:
<!-- [!code classes:overflow-visible] -->
<div class="overflow-visible ...">
<!-- ... -->
</div>
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:
<!-- [!code classes:overflow-hidden] -->
<div class="overflow-hidden ...">
<!-- ... -->
</div>
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:
<!-- [!code classes:overflow-auto] -->
<div class="overflow-auto ...">
<!-- ... -->
</div>
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:
Andrew
Emily
Whitney
David
Kristin
Sarah
<!-- [!code classes:overflow-x-auto] -->
<div class="overflow-x-auto ...">
<!-- ... -->
</div>
Scrolling vertically if needed¶
Use the overflow-y-auto utility to allow vertical scrolling if needed:
<!-- [!code classes:overflow-y-auto] -->
<div class="h-32 overflow-y-auto ...">
<!-- ... -->
</div>
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:
Andrew
Emily
Whitney
David
Kristin
Sarah
<!-- [!code classes:overflow-x-scroll] -->
<div class="overflow-x-scroll ...">
<!-- ... -->
</div>
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:
<!-- [!code classes:overflow-y-scroll] -->
<div class="overflow-y-scroll ...">
<!-- ... -->
</div>
Scrolling in all directions¶
Use the overflow-scroll utility to add scrollbars to an element:
<!-- [!code classes:overflow-scroll] -->
<div class="overflow-scroll ...">
<!-- ... -->
</div>
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.