Overflow

Home/Utilities/Overflow

Apply overflow to both axes simultaneously.

.overflow-hidden

Long text that gets clipped at the edge of the container without any scrollbar appearing.

.overflow-auto

Long text that is scrollable when it exceeds the container height. Scroll to see more content inside this box.

.overflow-visible

Overflowing content is not clipped.

<div class="overflow-hidden">...</div>
<div class="overflow-auto">...</div>
<div class="overflow-scroll">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-clip">...</div>

Class	CSS
`.overflow-visible`	`overflow: visible`
`.overflow-hidden`	`overflow: hidden`
`.overflow-clip`	`overflow: clip`
`.overflow-scroll`	`overflow: scroll`
`.overflow-auto`	`overflow: auto`

Axis-specific overflow

Use -x- and -y- variants to control overflow on a single axis.

<!-- Horizontal scroll, vertical clip -->
<div class="overflow-x-auto overflow-y-hidden">...</div>

<!-- Vertical scroll only -->
<div class="overflow-y-auto overflow-x-hidden">...</div>

Class	CSS
`.overflow-x-visible`	`overflow-x: visible`
`.overflow-x-hidden`	`overflow-x: hidden`
`.overflow-x-clip`	`overflow-x: clip`
`.overflow-x-scroll`	`overflow-x: scroll`
`.overflow-x-auto`	`overflow-x: auto`
`.overflow-y-visible`	`overflow-y: visible`
`.overflow-y-hidden`	`overflow-y: hidden`
`.overflow-y-clip`	`overflow-y: clip`
`.overflow-y-scroll`	`overflow-y: scroll`
`.overflow-y-auto`	`overflow-y: auto`

Responsive variants. All overflow utilities support breakpoint prefixes - e.g. md:overflow-hidden, lg:overflow-x-auto.