Overflow
Use these shorthand utilities for quickly configuring how content overflows an element.
|
Class
|
Properties
|
|---|---|
| overflow-auto | |
| overflow-hidden | |
| overflow-visible | |
| overflow-scroll | |
| overflow-y-auto | |
| overflow-y-hidden | |
| overflow-y-visible | |
| overflow-y-scroll | |
| overflow-x-auto | |
| overflow-x-hidden | |
| overflow-x-visible | |
| overflow-x-scroll |
Usage
Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.
Auto
If overflow is clipped, a scroll-bar should be added to see the rest of the content.
<div class="h-40 overflow-auto">
...
</div>
Hidden
The overflow is clipped, and the rest of the content will be invisible
<div class="h-40 overflow-hidden">
...
</div>
Visible
The overflow is not clipped. It renders outside the element's box. This is the default behaviour.
<div class="h-40 overflow-visible">
...
</div>
Scroll
The overflow is clipped, but a scroll-bar is added to see the rest of the content
<div class="h-40 overflow-scroll">
...
</div>
Responsive
Responsive variations also exist for each overflow value. Use the .overflow-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing overflow utility.
<div class="overflow-md-hidden ..."></div>