Overflow

Class	Properties
ovf-auto	overflow: auto;
ovf-c	overflow: clip;
ovf-h	overflow: hidden;
ovf-s	overflow: scroll;
ovf-v	overflow: visible;

Auto

This example sets the overflow to auto. The element will add scrollbars if the content overflows the container.

Try scrolling through the container to see how the overflow behaves.

A

<div class="dim-30 ovf-auto p-4 stripes">
  <div class="ai-c bg-indigo d-f h-full jc-c rad-1 tc-white w-38">A</div>
</div>

Clip

This example sets the overflow to clip. The content that overflows the container will be clipped and not visible.

A

<div class="dim-30 ovf-c p-4 stripes">
  <div class="ai-c bg-indigo d-f h-full jc-c rad-1 tc-white w-38">A</div>
</div>

Hidden

This example sets the overflow to hidden. The content that overflows the container will be hidden and not visible, without scrollbars.

A

<div class="dim-30 ovf-h p-4 stripes">
  <div class="ai-c bg-indigo d-f h-full jc-c rad-1 tc-white w-38">A</div>
</div>

Scroll

This example sets the overflow to scroll. The element will always show scrollbars, regardless of whether the content overflows.

A

<div class="dim-30 ovf-s p-4 stripes">
  <div class="ai-c bg-indigo d-f h-full jc-c rad-1 tc-white w-38">A</div>
</div>

Visible

This example sets the overflow to visible. The content will overflow the container and be visible outside of it.

A

<div class="dim-30 ovf-v p-4 stripes">
  <div class="ai-c bg-indigo d-f h-full jc-c rad-1 tc-white w-38">A</div>
</div>

---

Overflow X

Controls how an element behaves when content overflows on the X-axis.

Class	Properties
ovf-x-auto	overflow-x: auto;
ovf-x-c	overflow-x: clip;
ovf-x-h	overflow-x: hidden;
ovf-x-s	overflow-x: scroll;
ovf-x-v	overflow-x: visible;

We're still working on this one!

<p class="fw-600 ta-c">We're still working on this one!</p>

---

Overflow Y

Controls how an element behaves when content overflows on the Y-axis.

Class	Properties
ovf-y-auto	overflow-y: auto;
ovf-y-c	overflow-y: clip;
ovf-y-h	overflow-y: hidden;
ovf-y-s	overflow-y: scroll;
ovf-y-v	overflow-y: visible;

We're still working on this one!

<p class="fw-600 ta-c">We're still working on this one!</p>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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

<div class="ovf-h md:ovf-auto ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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

<div class="ovf-h h:ovf-auto ..."></div>