Overflow

Utilities to control how an element handles content that overflows its available space.

Usage

info

We can apply these principles to a specific axis. Use overflow-x--[value] to apply an overflow style on the horizontal axis; use overflow-y--[value] to apply an overflow style on the vertical axis.

overflow--auto

Use overflow--auto to let the browser determine whether to clip content and show a scroll bar.

overflow--visible

Use overflow--visible to show content that overflows without clipping. No scroll bar will show.

overflow--hidden

Use overflow--hidden to clip content and prevent the scroll bar from showing.

overflow--scroll

Use overflow--scroll to always show scroll styles on the horizontal and vertical axes.

Some browsers will still apply the scroll styles, even when content does not overflow.

Utility to Property Table

info

Utilities follow a [particle-key]--[value] format.

Utility Class	CSS Properties
overflow--auto	overflow: auto
overflow--hidden	overflow: hidden
overflow--scroll	overflow: scroll
overflow--visible	overflow: visible
overflow--inherit	overflow: inherit
overflow-x--auto	overflow-x: auto
overflow-x--hidden	overflow-x: hidden
overflow-x--scroll	overflow-x: scroll
overflow-x--inherit	overflow-x: inherit
overflow-y--auto	overflow-y: auto
overflow-y--hidden	overflow-y: hidden
overflow-y--scroll	overflow-y: scroll
overflow-y--visible	overflow-y: visible
overflow-y--inherit	overflow-y: inherit