Overflow Y

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

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

Visible

Initial value

Ensures that any content overflowing vertically remains visible outside the container.

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

Auto

Allows the content to scroll vertically if it overflows the container, while hiding the scrollbar when not needed.

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

Clip

Clips the content that overflows vertically, preventing it from being displayed or scrolled.

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

Hidden

Hides any content that overflows vertically, ensuring it is not visible or scrollable.

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

Scroll

Enables a vertical scrollbar for the container, allowing users to scroll through the content even if it doesn’t overflow.

<div class="bg-indigo-2 h-32 o-y-s p-4 w-64">
  <div class="bg-indigo h-64 p-4 tc-white w-full">This content overflows the container, and a vertical scrollbar is 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-y-*, md:o-y-*, lg:o-y-*, and xxl:o-y-* to allow targeting specific utilities in different viewports.

Using hover states

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