Overflow
Utilities for controlling the overflow behavior of an element.
| Class Name | CSS Equivalent |
|---|---|
| overflow-visible | overflow: visible; |
| overflow-x-visible | overflow-x: visible; |
| overflow-y-visible | overflow-y: visible; |
| overflow-hidden | overflow: hidden; |
| overflow-x-hidden | overflow-x: hidden; |
| overflow-y-hidden | overflow-y: hidden; |
| overflow-clip | overflow: clip; |
| overflow-x-clip | overflow-x: clip; |
| overflow-y-clip | overflow-y: clip; |
| overflow-scroll | overflow: scroll; |
| overflow-x-scroll | overflow-x: scroll; |
| overflow-y-scroll | overflow-y: scroll; |
| overflow-auto | overflow: auto; |
| overflow-x-auto | overflow-x: auto; |
| overflow-y-auto | overflow-y: auto; |
Showing content that overflows
The .overflow-visible class sets the overflow property to visible. This allows content to overflow the element's box if needed, and scrollbars are not displayed.
<div class="overflow-visible">
<!-- Overflowing content here -->
</div>Showing content that overflows horizontally
The .overflow-x-visible class sets the overflow-x property to visible. Horizontal overflow is allowed, and scrollbars are not displayed.
<div class="overflow-x-visible">
<!-- Horizontal overflowing content here -->
</div>Showing content that overflows vertically
The .overflow-y-visible class sets the overflow-y property to visible. Vertical overflow is allowed, and scrollbars are not displayed.
<div class="overflow-y-visible">
<!-- Vertical overflowing content here -->
</div>Hiding content that overflows
The .overflow-hidden class sets the overflow property to hidden. Content that overflows the element's box is hidden, and scrollbars are not displayed.
<div class="overflow-hidden">
<!-- Hidden overflowing content here -->
</div>Hiding content that overflows horizontally
The .overflow-x-hidden class sets the overflow-x property to hidden. Horizontal overflow is hidden, and scrollbars are not displayed.
<div class="overflow-x-hidden">
<!-- Hidden horizontal overflowing content here -->
</div>Hiding content that overflows vertically
The .overflow-y-hidden class sets the overflow-y property to hidden. Vertical overflow is hidden, and scrollbars are not displayed.
<div class="overflow-y-hidden">
<!-- Hidden vertical overflowing content here -->
</div>Scrolling if needed
The .overflow-auto class sets the overflow property to auto. Scrollbars are displayed if the content overflows the element's box. Scrollbars appear only when needed.
<div class="overflow-auto">
<!-- Auto-scrollable overflowing content here -->
</div>Scrolling horizontally if needed
The .overflow-x-auto class sets the overflow-x property to auto. Horizontal scrollbars are displayed if the content overflows horizontally. Scrollbars appear only when needed.
<div class="overflow-x-auto">
<!-- Horizontal auto-scrollable overflowing content here -->
</div>Scrolling vertically if needed
The .overflow-y-auto class sets the overflow-y property to auto. Vertical scrollbars are displayed if the content overflows vertically. Scrollbars appear only when needed.
<div class="overflow-y-auto">
<!-- Vertical auto-scrollable overflowing content here -->
</div>Scrolling in all directions
The .overflow-scroll class sets the overflow property to scroll. Scrollbars are displayed if the content overflows the element's box.
<div class="overflow-scroll">
<!-- Scrollable overflowing content here -->
</div>Scrolling horizontally always
The .overflow-x-scroll class sets the overflow-x property to scroll. Horizontal scrollbars are displayed if the content overflows horizontally.
<div class="overflow-x-scroll">
<!-- Horizontal scrollable overflowing content here -->
</div>Scrolling vertically always
The .overflow-y-scroll class sets the overflow-y property to scroll. Vertical scrollbars are displayed if the content overflows vertically.
<div class="overflow-y-scroll">
<!-- Vertical scrollable overflowing content here -->
</div>Overflow: Clip
The .overflow-clip class sets the overflow property to clip. Content that overflows the element's box is clipped, and no scrollbars are displayed.
<div class="overflow-clip">
<!-- Clipped overflowing content here -->
</div>Overflow X: Clip
The .overflow-x-clip class sets the overflow-x property to clip. Horizontal overflow is clipped, and no scrollbars are displayed.
<div class="overflow-x-clip">
<!-- Clipped horizontal overflowing content here -->
</div>Overflow Y: Clip
The .overflow-y-clip class sets the overflow-y property to clip. Vertical overflow is clipped, and no scrollbars are displayed.
<div class="overflow-y-clip">
<!-- Clipped vertical overflowing content here -->
</div>