Overflow

Controls how an element behaves when content overflows.

Class	Style
`o-auto`	`overflow: auto`
`o-c`	`overflow: clip`
`o-h`	`overflow: hidden`
`o-s`	`overflow: scroll`
`o-v`	`overflow: visible`

Visible

Initial value

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

<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>

Auto

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

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

<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

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

<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

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

<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

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

<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>

Using utility variants

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

Using media queries

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

Using hover states

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