overflow

Examples

Showing content that overflows

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

Andrew Alfred Technical advisor

<div class="overflow-visible ..."></div>

Hiding content that overflows

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

Andrew Alfred Technical advisor

<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:

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div class="overflow-auto ..."></div>

Scrolling horizontally if needed

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

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-auto ..."></div>

Scrolling vertically if needed

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

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<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:

<div class="overflow-scroll ..."></div>

Responsive design

Prefix an overflow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="overflow-auto md:overflow-scroll">  <!-- ... --></div>

Learn more about using variants in the variants documentation.