Overflow

Utility	Properties
Error: 429

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.

This content overflows the container.

<div class="bg-indigo-2 h-32 o-auto p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content overflows the container.</div>
</div>

Clip

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

This content is clipped and cannot be scrolled.

<div class="bg-indigo-2 h-32 o-c p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content is clipped and cannot be scrolled.</div>
</div>

Hidden

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

This content is hidden when it overflows.

<div class="bg-indigo-2 h-32 o-h p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content is hidden when it overflows.</div>
</div>

Scroll

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

This content overflows the container, and scrollbars are always visible.

<div class="bg-indigo-2 h-32 o-s p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content overflows the container, and scrollbars are always visible.</div>
</div>

Visible

Initial value

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

This content overflows the container and is fully visible.

<div class="bg-indigo-2 h-32 o-v p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content overflows the container and is fully visible.</div>
</div>

Conditional styles

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

Media modifier

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

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

Hover modifier

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

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