Layout

Overflow

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

Quick reference

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

Justina Matter

Warp Scientist

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

Justina Matter

Warp Scientist

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

Justina Matter

Warp Scientist

Narve Hoops

Warp Scientist

Dagny Calamity

Warp Scientist

Joar Quack

Warp Scientist

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

Matter

Hoops

Quack

Sparks

Hubble

Calamity

Glum

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.

Justina Matter

Warp Scientist

Narve Hoops

Warp Scientist

Dagny Calamity

Warp Scientist

Joar Quack

Warp Scientist

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

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

Applying conditionally

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>