Over flow

Use these shorthand utilities for quickly configuring how content overflows an element.

What is Overflow in CSS?

The overflow property in CSS determines how to handle content that exceeds the boundary of its container. This property is especially useful when dealing with text, images, or other elements that might extend beyond their intended dimensions.

Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.

Common Overflow CSS Values

overflow: visible – The default value. The content will not be clipped and will overflow outside its container.
overflow: hidden – The content is clipped and hidden from view, with no scrollbars provided..
overflow: scroll – Scrollbars are added, allowing the user to scroll to see the overflowing content..
overflow: auto – Adds scrollbars only when content overflows.
overflow: clip – Clips the content to the container size without providing any scrolling mechanism.

Overflow on X and Y axis

This is an example of using .overflow-auto on an element with set width and height dimensions.

This is an example of using .overflow-hidden on an element with set width and height dimensions.

This is an example of using .overflow-visible on an element with set width and height dimensions.

This is an example of using .overflow-scroll on an element with set width and height dimensions.


...
...
...
...

Overflow on X axis

This is an example of using .overflow-x-auto on an element with set width and height dimensions.

This is an example of using .overflow-x-hidden on an element with set width and height dimensions.

This is an example of using .overflow-x-visible on an element with set width and height dimensions.

This is an example of using .overflow-x-scroll on an element with set width and height dimensions.


...
...
...
...

Overflow on Y axis

This is an example of using .overflow-y-auto on an element with set width and height dimensions.

This is an example of using .overflow-y-hidden on an element with set width and height dimensions.

This is an example of using .overflow-y-visible on an element with set width and height dimensions.

This is an example of using .overflow-y-scroll on an element with set width and height dimensions.


...
...
...
...

Responsive Overflow

Overflow utility classes that apply to all breakpoints, from sm to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query.

As such, the classes are named using the format:

.overflow-{value} for sm to xl
.overflow-x-{value} for sm to xl
.overflow-y-{value} for sm to xl
.overflow-{breakpoint}-{value} for sm, md, lg,and xl.
.overflow-{breakpoint}-x-{value} for sm, md, lg,and xl.
.overflow-{breakpoint}-y-{value} for sm, md, lg,and xl.

Where value is one of: auto,hidden,visible,scroll

Designed and built with ♥ by Rume Aluya.