Overflow

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

Examples

<p class="d-of-auto"></p>
<p class="d-of-x-auto"></p>
<p class="d-of-y-auto"></p>
<p class="d-of-hidden"></p>
<p class="d-of-x-hidden"></p>
<p class="d-of-y-hidden"></p>
<p class="d-of-scroll"></p>
<p class="d-of-x-scroll"></p>
<p class="d-of-y-scroll"></p>
<p class="d-of-visible"></p>
<p class="d-of-x-visible"></p>
<p class="d-of-y-visible"></p>
<p class="d-of-unset"></p>

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.
Overflow documentation last updated Thursday, June 11, 2026