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

1
2
3
4
5
6
7
8
9
10
<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>
.overflow-auto
.overflow-x-auto
.overflow-y-auto
.overflow-hidden
.overflow-x-hidden
.overflow-y-hidden
.overflow-scroll
.overflow-x-scroll
.overflow-y-scroll
.overflow-visible