Overflow

Utilities for controlling how an element handles content that is too large for the container.

Classes

The overflow CSS shorthand property sets the desired behavior for how content is handled when it exceeds the wrapper's bounds in both directions (x-axis and then y-axis).

Class Output Description
.d-of-auto overflow: auto; Adds scrollbars to an element when its content overflows its bounds. Scrollbars are shown only if scrolling is necessary.
.d-of-x-auto overflow-x: auto; Adds scrollbars to an element when its content overflows its horizontal bounds. Scrollbars are shown only if scrolling is necessary.
.d-of-y-auto overflow-y: auto; Adds scrollbars to an element when its content overflows its vertical bounds. Scrollbars are shown only if scrolling is necessary.
.d-of-hidden overflow: hidden; Content is clipped if necessary to fit into an element. No scrollbars are provided.
.d-of-x-hidden overflow-x: hidden; Content is clipped if necessary to fit into an element. No horizontal scrollbars are provided.
.d-of-y-hidden overflow-y: hidden; Content is clipped if necessary to fit into an element. No vertical scrollbars are provided.
.d-of-scroll overflow: scroll; Adds scrollbars to an element. Scrollbars are always shown unless always-visible scrollbars are disabled by the operating system.
.d-of-x-scroll overflow-x: scroll; Adds horizontal scrollbars to an element. Scrollbars are always shown unless always-visible scrollbars are disabled by the operating system.
.d-of-y-scroll overflow-y: scroll; Adds vertical scrollbars to an element. Scrollbars are always shown unless always-visible scrollbars are disabled by the operating system.
.d-of-visible overflow: visible; Prevents content within an element from being clipped both horizontally and vertically. Content that overflows the element’s bounds will be visible.
.d-of-x-visible overflow-x: visible; Prevents content within an element from being clipped horizontally. Content that overflows the element’s bounds will be visible.
.d-of-y-visible overflow-y: visible; Prevents content within an element from being clipped vertically. Content that overflows the element’s bounds will be visible.
.d-of-unset overflow: unset; Resets the overflow property to its initial value.

Examples