Overflow

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

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 !important; 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 !important; 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 !important; 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 !important; Content is clipped if necessary to fit into an element. No scrollbars are provided.
.d-of-x-hidden overflow-x: hidden !important; Content is clipped if necessary to fit into an element. No horizontal scrollbars are provided.
.d-of-y-hidden overflow-y: hidden !important; Content is clipped if necessary to fit into an element. No vertical scrollbars are provided.
.d-of-scroll overflow: scroll !important; 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 !important; 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 !important; 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 !important; 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 !important; 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 !important; Prevents content within an element from being clipped vertically. Content that overflows the element’s bounds will be visible.
.d-of-unset overflow: unset !important; Resets the overflow property to its initial value.
.d-of-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-x-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-y-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-x-hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-y-hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-x-scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-y-scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-visible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-x-visible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-y-visible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-unset

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

<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>

Examples