Overflow

Overflow

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

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

overflow-x

Adjust the overflow-x property to affect the overflow of content horizontally.

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

overflow-y

Adjust the overflow-y property to affect the overflow of content vertically.

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

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

CSS

Sass utilities API

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

"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,
),