Skip to main content

Overflow

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

Overflow

Use .overflow-auto, .overflow-hidden, .overflow-clip, .overflow-visible, and .overflow-scroll to control overflow on both axes. Use .overflow-x-* and .overflow-y-* for one axis.

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll at the block level.
This is an example of using .overflow-hidden. Content that overflows is clipped.
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

Overscroll behavior

Controls what happens when you reach the boundary: .overscroll-auto, .overscroll-contain, .overscroll-none.

<div class="overscroll-contain">...</div>