CSS Over flow

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

What is CSS Overflow?

CSS overflow is a property that controls how content that exceeds an element's box is handled.

What is CSS Overflow?

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 CSS Overflow 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.
This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
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 Y and X axis

Class Properties
overflow-x-visible overflow-x: visible;
overflow-y-visible overflow-y: visible;
overflow-x-hidden overflow-x: hidden;
overflow-y-hidden overflow-y: hidden;
overflow-x-auto overflow-x: auto;
overflow-y-auto overflow-y: auto;
overflow-x-scroll overflow-x: scroll;
overflow-y-scroll overflow-y: scroll;

Responsive CSS Overflow

CSS 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-{breakpoint}-{value} for sm, md, lg,and xl.

Where value is one of: visible,hidden,auto,scroll, x-scrolland y-scroll

On this page