Layout

Overflow

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

Quick reference

Class
Properties
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-y-autooverflow-y: auto;
overflow-x-hiddenoverflow-x: hidden;
overflow-y-hiddenoverflow-y: hidden;
overflow-x-clipoverflow-x: clip;
overflow-y-clipoverflow-y: clip;
overflow-x-visibleoverflow-x: visible;
overflow-y-visibleoverflow-y: visible;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;

Show all classes

Basic usage

Showing content that overflows

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

Overflow - 图1

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

Hiding content that overflows

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

Overflow - 图2

  1. <div class="overflow-hidden ..."></div>

Scrolling if needed

Use overflow-auto 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.

Overflow - 图3

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

Scrolling horizontally if needed

Use overflow-x-auto to allow horizontal scrolling if needed.

Overflow - 图4

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

Scrolling vertically if needed

Use overflow-y-auto to allow vertical scrolling if needed.

Overflow - 图5

  1. <div class="overflow-y-auto h-32 ..."></div>

Scrolling horizontally always

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

Overflow - 图6

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

Scrolling vertically always

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

Overflow - 图7

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

Scrolling in all directions

Use overflow-scroll 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.

Overflow - 图8

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

  1. <div class="overflow-auto hover:overflow-scroll">
  2. <!-- ... -->
  3. </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.

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

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