React Overflow Utilities

Overflow

Use these shorthand utilities for quickly configuring how content overflows an element.

Class	Styles
.overflow-auto	overflow: auto;
.overflow-hidden	overflow: hidden;
.overflow-visible	overflow: visible;
.overflow-scroll	overflow: scroll;
.overflow-x-auto	overflow-x: auto;
.overflow-x-hidden	overflow-x: hidden;
.overflow-x-visible	overflow-x: visible;
.overflow-x-scroll	overflow-x: scroll;
.overflow-y-auto	overflow-y: auto;
.overflow-y-hidden	overflow-y: hidden;
.overflow-y-visible	overflow-y: visible;
.overflow-y-scroll	overflow-y: scroll;

On this page

Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

This is an example of using .overflow-hidden on an element with set width and height dimensions.

This is an example of using .overflow-visible on an element with set width and height dimensions.

This is an example of using .overflow-scroll on an element with set width and height dimensions.

<div className="overflow-auto">...</div>
<div className="overflow-hidden">...</div>
<div className="overflow-visible">...</div>
<div className="overflow-scroll">...</div>

Overflow on one axis

The same four values are generated per axis as .overflow-x-* and .overflow-y-*, which set overflow-x and overflow-y on their own. Use them when only one direction should scroll or clip.

This is an example of using .overflow-x-scroll, so this content scrolls horizontally and is clipped vertically.

This is an example of using .overflow-y-scroll, so this content scrolls vertically and is clipped horizontally.

<div className="overflow-x-auto">...</div>
<div className="overflow-x-hidden">...</div>
<div className="overflow-x-visible">...</div>
<div className="overflow-x-scroll">...</div>

<div className="overflow-y-auto">...</div>
<div className="overflow-y-hidden">...</div>
<div className="overflow-y-visible">...</div>
<div className="overflow-y-scroll">...</div>

Using Sass variables, you may customize the overflow utilities by changing the $overflows variable in _utilities.scss.

Customizing

Utilities API

Overflow utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss

"overflow": (
  property: overflow,
  values: auto hidden visible scroll,
),
"overflow-x": (
  property: overflow-x,
  values: auto hidden visible scroll,
),
"overflow-y": (
  property: overflow-y,
  values: auto hidden visible scroll,
),