Overflow

Easily adjust how content overflows within a container.

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.