Question

Utilities for controlling how an element handles content that is too large for the container.

Quick reference

Class	Properties
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;

Basic usage

Showing content that overflows

Use the overflow-visible utility to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.

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. Unlike overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

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="overflow-y-auto h-32 ..."></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

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

Andrew Alfred Technical advisor Debra Houston Analyst Jane White Director, Marketing Ray Flint Technical Advisor

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

Scrolling in all directions

Use the overflow-scroll utility to add scrollbars to an element. 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.

Sun Mon Tue Wed Thu Fri Sat 5 AM 6 AM 7 AM 8 AM 9 AM 10 AM 11 AM 12 PM 1 PM 2 PM 3 PM 4 PM 5 PM 6 PM 7 PM 8 PM 5 AM Flight to Vancouver Toronto YYZ 6 AM Breakfast Mel's Diner 5 PM ???? Party party ???? We like to party!

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

---

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:overflow-scroll to only apply the overflow-scroll utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:overflow-scroll to apply the overflow-scroll utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.