Overflow
Atomic overflow classes allow you to change an element's overflow properties quickly.
Classes
| Class | Output | Definition |
|---|---|---|
.overflow-auto | overflow: auto; | If content fits inside the content box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows. |
.overflow-x-auto | overflow-x: auto; | If content fits inside the content box, it looks the same as visible in the x dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows. |
.overflow-y-auto | overflow-y: auto; | If content fits inside the content box, it looks the same as visible in the y dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows. |
.overflow-hidden | overflow: hidden; | Content is clipped if necessary to fit the content box. No scrollbars are provided. |
.overflow-x-hidden | overflow-x: hidden; | Content is clipped if necessary to fit the content box. No scrollbars are provided in the x dimension. |
.overflow-y-hidden | overflow-y: hidden; | Content is clipped if necessary to fit the content box. No scrollbars are provided in the y dimension. |
.overflow-scroll | overflow: scroll; | Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content. |
.overflow-x-scroll | overflow-x: scroll; | Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the x dimension. |
.overflow-y-scroll | overflow-y: scroll; | Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the y dimension. |
.overflow-visible | overflow: visible; | Content is not clipped and may be rendered outside the content box. This is the default value. |
Examples
<div class="overflow-auto">…</div>
<div class="overflow-x-auto">…</div>
<div class="overflow-y-auto">…</div>
<div class="overflow-hidden">…</div>
<div class="overflow-x-hidden">…</div>
<div class="overflow-y-hidden">…</div>
<div class="overflow-scroll">…</div>
<div class="overflow-x-scroll">…</div>
<div class="overflow-y-scroll">…</div>
<div class="overflow-visible">…</div>