Overflow Y

Utility	Properties
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;

Auto

This example sets the vertical overflow behavior to auto. The o-y-auto utility allows the content to scroll vertically if it overflows the container, while hiding the scrollbar when not needed.

This content overflows vertically.

<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

This example sets the vertical overflow behavior to clip. The o-y-c utility clips the content that overflows vertically, preventing it from being displayed or scrolled.

This content is clipped and cannot be scrolled vertically.

<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

This example sets the vertical overflow behavior to hidden. The o-y-h utility hides any content that overflows vertically, ensuring it is not visible or scrollable.

This content is hidden when it overflows vertically.

<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

This example sets the vertical overflow behavior to scroll. The o-y-s utility enables a vertical scrollbar for the container, allowing users to scroll through the content even if it doesn’t overflow.

This content overflows the container, and a vertical scrollbar is always visible.

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

Visible

Initial value

This example sets the vertical overflow behavior to visible. The o-y-v utility ensures that any content overflowing vertically remains visible outside the container.

This content overflows the container and is fully visible vertically.

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

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-y-h md:o-y-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-y-h h:o-y-auto ..."></div>