v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Overflow

Easily adjust how content overflows within a container.

Page Contents

Notation #

These non-responsive overflow utilities are available:

  • .overflow-auto
  • .overflow-hidden

Examples #

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using .overflow-hidden on an element with set width and height dimensions.
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</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.
$utility-overflow string auto, hidden List of overflow values that will be used to generate overflow utilities.

Mixins #

No mixins available.