Overflow

Easily adjust how content overflows within a container.

Page Contents

Overflow

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

.overflow-hidden example on an element with set width and height dimensions.

.overflow-scroll example on an element with set width and height dimensions.

.overflow-visible example on an element with set width and height dimensions.

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

`overflow-x`

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

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

.overflow-x-hidden example on an element with set width and height dimensions.

.overflow-x-scroll example on an element with set width and height dimensions.

.overflow-x-visible example on an element with set width and height dimensions.

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

`overflow-y`

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

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

.overflow-y-hidden example on an element with set width and height dimensions.

.overflow-y-scroll example on an element with set width and height dimensions.

.overflow-y-visible example on an element with set width and height dimensions.

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

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name	Type	Default	Description
`$enable-utility-overflow`	boolean	`true`	Enable the generation of the overflow utility classes.
`$enable-utility-overflow-x`	boolean	`true`	Enable the generation of the overflow-x utility classes.
`$enable-utility-overflow-y`	boolean	`true`	Enable the generation of the overflow-y utility classes.
`$utility-overflow`	string	`auto, hidden, scroll, visible`	List of overflow values that will be used to generate overflow utilities. Setting this to `null` will not generete these utilities.
`$utility-overflow-x`	string	`auto, hidden, scroll, visible`	List of overflow values that will be used to generate overflow-x utilities. Setting this to `null` will not generete these utilities.
`$utility-overflow-y`	string	`auto, hidden, scroll, visible`	List of overflow values that will be used to generate overflow-y utilities. Setting this to `null` will not generete these utilities.

Mixins

No mixins available.