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

Quick reference

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

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.

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

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

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

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

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

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

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

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

Scrolling horizontally if needed

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

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

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

Scrolling vertically if needed

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

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

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

Edit this page on Github

Last updated on April 6, 2024

Overflow