Overflow
Controls how an element behaves when content overflows.
| 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.
<div class="bg-l-indigo-5 h-32 ovf-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.
<div class="bg-l-indigo-5 h-32 ovf-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.
<div class="bg-l-indigo-5 h-32 ovf-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.
<div class="bg-l-indigo-5 h-32 ovf-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
This example sets the overflow to visible. The content will overflow the container and be visible outside of it.
<div class="bg-l-indigo-5 h-32 ovf-v p-4"> <div class="bg-indigo h-64 p-4 tc-white">This content overflows the container and is fully visible.</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; |
Auto
This example sets the horizontal overflow behavior to auto. The ovf-x-auto utility allows the content to scroll horizontally if it overflows the container, while hiding the scrollbar when not needed.
<div class="bg-l-indigo-5 h-32 ovf-x-auto p-4 w-64"> <div class="bg-indigo p-4 tc-white w-96">This content overflows horizontally.</div></div>Clip
This example sets the horizontal overflow behavior to clip. The ovf-x-c utility clips the content that overflows horizontally, preventing it from being displayed or scrolled.
<div class="bg-l-indigo-5 h-32 ovf-x-c p-4 w-64"> <div class="bg-indigo p-4 tc-white w-96">This content is clipped and cannot be scrolled horizontally.</div></div>Hidden
This example sets the horizontal overflow behavior to hidden. The ovf-x-h utility hides any content that overflows horizontally, ensuring it is not visible or scrollable.
<div class="bg-l-indigo-5 h-32 ovf-x-h p-4 w-64"> <div class="bg-indigo p-4 tc-white w-96">This content is hidden when it overflows horizontally.</div></div>Scroll
This example sets the horizontal overflow behavior to scroll. The ovf-x-s utility enables a horizontal scrollbar for the container, allowing users to scroll through the content even if it doesn’t overflow.
<div class="bg-l-indigo-5 h-32 ovf-x-s p-4 w-64"> <div class="bg-indigo p-4 tc-white w-96">This content overflows the container, and a horizontal scrollbar is always visible.</div></div>Visible
This example sets the horizontal overflow behavior to visible. The ovf-x-v utility ensures that any content overflowing horizontally remains visible outside the container.
<div class="bg-l-indigo-5 h-32 ovf-x-v p-4 w-64"> <div class="bg-indigo p-4 tc-white w-96">This content overflows the container and is fully visible horizontally.</div></div>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; |
Auto
This example sets the vertical overflow behavior to auto. The ovf-y-auto utility allows the content to scroll vertically if it overflows the container, while hiding the scrollbar when not needed.
<div class="bg-l-indigo-5 h-32 ovf-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 ovf-y-c utility clips the content that overflows vertically, preventing it from being displayed or scrolled.
<div class="bg-l-indigo-5 h-32 ovf-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 ovf-y-h utility hides any content that overflows vertically, ensuring it is not visible or scrollable.
<div class="bg-l-indigo-5 h-32 ovf-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 ovf-y-s utility enables a vertical scrollbar for the container, allowing users to scroll through the content even if it doesn’t overflow.
<div class="bg-l-indigo-5 h-32 ovf-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
This example sets the vertical overflow behavior to visible. The ovf-y-v utility ensures that any content overflowing vertically remains visible outside the container.
<div class="bg-l-indigo-5 h-32 ovf-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.
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>
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>