Overflow

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


Class
Properties
overflow-auto
overflow-hidden
overflow-visible
overflow-scroll
overflow-y-auto
overflow-y-hidden
overflow-y-visible
overflow-y-scroll
overflow-x-auto
overflow-x-hidden
overflow-x-visible
overflow-x-scroll

Usage

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

Auto

If overflow is clipped, a scroll-bar should be added to see the rest of the content.

<div class="h-40 overflow-auto">
    ...
</div>

Hidden

The overflow is clipped, and the rest of the content will be invisible

<div class="h-40 overflow-hidden">
    ...
</div>

Visible

The overflow is not clipped. It renders outside the element's box. This is the default behaviour.

<div class="h-40 overflow-visible">
    ...
</div>

Scroll

The overflow is clipped, but a scroll-bar is added to see the rest of the content

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

Responsive

Responsive variations also exist for each overflow value. Use the .overflow-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing overflow utility.

<div class="overflow-md-hidden ..."></div>
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->