PositioningOverflow
Yumma CSS 3.5 is live! 🎉

Overflow

Controls how an element behaves when content overflows.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari
ClassStyle
o-autooverflow: auto;
o-coverflow: clip;
o-hoverflow: hidden;
o-soverflow: scroll;
o-voverflow: visible;

Visible

Initial value

The content will overflow the container and be visible outside of it.

Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
<div class="b-1 bc-slate b-d h-32 o-v p-2 w-64">
  <div class="h-64 tc-slate w-full">Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</div>

Auto

The element will add scrollbars if the content overflows the container.

Try scrolling through the container to see how the overflow behaves.
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
<div class="b-1 bc-slate b-d h-32 o-auto p-2 w-64">
  <div class="h-64 tc-slate w-full">Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</div>

Clip

The content that overflows the container will be clipped and not visible.

Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
<div class="b-1 bc-slate b-d h-32 o-c p-2 w-64">
  <div class="h-64 tc-slate w-full">Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</div>

Hidden

The content that overflows the container will be hidden and not visible, without scrollbars.

Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
<div class="b-1 bc-slate b-d h-32 o-h p-2 w-64">
  <div class="h-64 tc-slate w-full">Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</div>

Scroll

The element will always show scrollbars, regardless of whether the content overflows.

Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
<div class="b-1 bc-slate b-d h-32 o-s p-2 w-64">
  <div class="h-64 tc-slate w-full">Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Targeting different viewports

You can combine responsive breakpoints like sm:o-*, md:o-*, lg:o-*, and xxl:o-* to allow targeting specific utilities in different viewports.

Targeting hover states

Alternatively, you can apply :hover by using h:o-* utility to override elements and change their values when hovering over them.