Tailwind CSS Overflow Cheatsheet

Complete reference for all Tailwind overflow utilities.
Interactive demos show each behavior. Click to copy class names.

Quick Navigation

Main Overflow X-Axis Y-Axis Demos Patterns FAQ

Main Overflow Utilities

Control how content is handled when it exceeds the container size.

Horizontal Overflow (X-Axis)

Control overflow behavior specifically for horizontal content.

Vertical Overflow (Y-Axis)

Control overflow behavior specifically for vertical content.

Interactive Demos

See each overflow utility in action

overflow-auto - Interactive Demo

Scrollbars appear only when content exceeds the container size.

With overflow (scrollable)

This content is wider and taller than the container.

Scroll horizontally and vertically to see all content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation.

Duis aute irure dolor in reprehenderit in voluptate.

Excepteur sint occaecat cupidatat non proident.

No overflow (no scrollbar)

This content fits within the container.

No scrollbars needed here.

<div class="h-40 overflow-auto">
  <!-- Content that may overflow -->
</div>

overflow-hidden - Interactive Demo

Content is clipped at the container boundary. No scrollbars, but JavaScript can still scroll.

Horizontal overflow clipped

This very long content extends far beyond the container but is clipped and invisible.

Vertical overflow clipped

Line 1

Line 2

Line 3

Line 4 - clipped

Line 5 - clipped

Line 6 - clipped

Common use: Card images, avatar circles, preventing layout breaks from long text.

overflow-clip vs overflow-hidden

Both clip content, but overflow-clip completely prevents scrolling (even via JavaScript).

overflow-hidden (can scroll via JS)

Content extends below...

Hidden content here

overflow-visible - Interactive Demo

Content is allowed to render outside the container boundaries.

Container

Badge

Tooltip extending outside

Common use: Tooltips, badges, dropdown menus, decorative elements that extend beyond their logical container.

<div class="relative overflow-visible">
  <span>Container</span>
  <div class="absolute -top-4 -right-4">
    Badge extends outside
  </div>
</div>

overflow-scroll - Interactive Demo

Scrollbars are always visible, even when content fits. Useful for consistent layouts.

overflow-scroll (always visible)

Short content that fits.

Scrollbar still visible.

overflow-auto (hidden when not needed)

Short content that fits.

No scrollbar needed.

Note: On macOS with "Show scroll bars: When scrolling", scrollbars may still hide. This behavior is OS-controlled.

Axis-Specific Overflow - Interactive Demo

Control horizontal (x) and vertical (y) overflow independently.

overflow-x-auto overflow-y-hidden (horizontal carousel)

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

overflow-y-auto overflow-x-hidden (scrollable list)

List item 1

List item 2

List item 3

List item 4

List item 5

List item 6

List item 7

List item 8

List item 9

List item 10

<!-- Horizontal scroll only -->
<div class="overflow-x-auto overflow-y-hidden">
  <div class="flex gap-4 w-max">...</div>
</div>

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

Common Patterns

Scrollable Container

<div class="h-64 overflow-auto">
  <!-- Long list of items -->
</div>

Image Card

<div class="rounded-xl overflow-hidden">
  <img src="..." class="w-full" />
  <div class="p-4">Content</div>
</div>

Horizontal Carousel

<div class="overflow-x-auto">
  <div class="flex gap-4 w-max">
    <div class="shrink-0">Card</div>
    <div class="shrink-0">Card</div>
  </div>
</div>

Text Truncation Container

<div class="overflow-hidden">
  <p class="truncate">
    Very long text...
  </p>
</div>

Avatar Circle

<div class="w-12 h-12 rounded-full
     overflow-hidden">
  <img src="avatar.jpg"
    class="w-full h-full object-cover" />
</div>

Modal with Scroll

<div class="fixed inset-0 overflow-y-auto">
  <div class="min-h-full flex
       items-center justify-center">
    <!-- Modal content -->
  </div>
</div>

Quick Reference Table

Class	CSS	Behavior
`overflow-auto`	`overflow: auto;`	Show scrollbar only when needed
`overflow-hidden`	`overflow: hidden;`	Clip content, allow JS scroll
`overflow-clip`	`overflow: clip;`	Clip content, no scrolling at all
`overflow-visible`	`overflow: visible;`	Content can overflow container
`overflow-scroll`	`overflow: scroll;`	Always show scrollbars
`overflow-x-auto`	`overflow-x: auto;`	Horizontal scroll when needed
`overflow-x-hidden`	`overflow-x: hidden;`	Clip horizontal overflow
`overflow-x-clip`	`overflow-x: clip;`	Clip horizontal, no scroll
`overflow-x-visible`	`overflow-x: visible;`	Show horizontal overflow
`overflow-x-scroll`	`overflow-x: scroll;`	Always show horizontal scrollbar
`overflow-y-auto`	`overflow-y: auto;`	Vertical scroll when needed
`overflow-y-hidden`	`overflow-y: hidden;`	Clip vertical overflow
`overflow-y-clip`	`overflow-y: clip;`	Clip vertical, no scroll
`overflow-y-visible`	`overflow-y: visible;`	Show vertical overflow
`overflow-y-scroll`	`overflow-y: scroll;`	Always show vertical scrollbar

Frequently Asked Questions

What is the difference between overflow-hidden and overflow-clip in Tailwind?

overflow-hidden clips content and allows programmatic scrolling via JavaScript, while overflow-clip completely prevents any scrolling. overflow-clip also creates a new formatting context and can be used with overflow-clip-margin for partial overflow.

When should I use overflow-auto vs overflow-scroll in Tailwind?

Use overflow-auto when you want scrollbars to appear only when content overflows. Use overflow-scroll when you want scrollbars to always be visible, regardless of whether content overflows. overflow-auto is more common for cleaner UIs.

How do I make only horizontal scrolling in Tailwind?

Use overflow-x-auto or overflow-x-scroll combined with overflow-y-hidden. For example: class="overflow-x-auto overflow-y-hidden" allows horizontal scrolling while hiding vertical overflow.

What does overflow-visible do in Tailwind CSS?

overflow-visible allows content to be displayed outside the element's box. This is useful for tooltips, dropdowns, and decorative elements that need to extend beyond their container.

Why doesn't overflow-hidden work on my element?

overflow-hidden requires the element to have a defined size (width/height) or be a block-level element. It also won't clip absolutely positioned children unless the container has position: relative or another positioning context.

How do I create a scrollable fixed-height container?

Combine a height utility with overflow-auto: class="h-64 overflow-auto". This creates a container that scrolls when content exceeds 16rem (256px) in height.

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element including overflow utilities. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Browse all free Tailwind tools →