Overflow Utilities overflow-*

Control how content that overflows an element's bounds is handled with scrolling, clipping, or visibility options.

Quick Reference

overflow-auto

Show scrollbars when needed

overflow: auto

overflow-hidden

Hide overflowing content

overflow: hidden

overflow-clip

Clip overflowing content

overflow: clip

overflow-visible

Show overflowing content

overflow: visible

overflow-scroll

Always show scrollbars

overflow: scroll

overflow-x-hidden

Hide horizontal overflow

overflow-x: hidden

overflow-y-auto

Vertical scroll when needed

overflow-y: auto

Interactive Examples

Overflow Hidden

Large Content

This content is larger than its container. With overflow-hidden, the overflowing parts are completely hidden and not accessible. No scrollbars are shown.

✓ Content is clipped at container boundaries

✓ No scrollbars visible

⚠️ Hidden content is not accessible

<div class="h-32 overflow-hidden">
  <div class="w-96 h-48">Large content</div>
</div>

Overflow Auto

Scrollable Content

This content is larger than its container. With overflow-auto, scrollbars appear automatically when needed, allowing users to access all the content by scrolling.

You can scroll both horizontally and vertically to see all content.

✓ Scrollbars appear when needed

✓ All content remains accessible

✓ Clean appearance when content fits

<div class="h-32 overflow-auto">
  <div class="w-96 h-48">Scrollable content</div>
</div>

Overflow Visible

Visible Overflow

This content extends beyond its container boundaries. With overflow-visible, the content is fully visible and can overlap other elements.

✓ All content visible

⚠️ May overlap other elements

⚠️ Can break layout if not managed

Directional Overflow

overflow-x-auto overflow-y-hidden

Horizontal scroll only - vertical content is clipped

overflow-x-hidden overflow-y-auto

Vertical scroll only - horizontal content is clipped

Common Use Cases

📱 Modal Backgrounds

Prevent body scrolling when modals are open.

<body class="overflow-hidden">

📜 Scrollable Lists

Create scrollable content areas with fixed heights.

<div class="h-64 overflow-y-auto">

🖼️ Image Containers

Clip images to specific container sizes.

<div class="overflow-hidden rounded">

📊 Data Tables

Enable horizontal scrolling for wide tables.

<div class="overflow-x-auto">

🎨 Animation Containers

Hide elements during slide animations.

<div class="overflow-hidden">

📝 Text Truncation

Clip long text content with ellipsis.

<div class="overflow-hidden truncate">

Overflow Behavior Guide

Overflow Types Explained

overflow-visible

Content extends beyond container boundaries. Default behavior for most elements.

overflow-hidden

Content is clipped at container edges. No scrollbars, content is inaccessible.

overflow-clip

Similar to hidden but more performant. Content is hard-clipped.

overflow-scroll

Always shows scrollbars, even when content fits within container.

overflow-auto

Shows scrollbars only when content overflows. Most commonly used.

Performance & Accessibility

Performance Tips

  • • overflow-clip is more performant than overflow-hidden
  • • Avoid overflow-visible on large containers
  • • Use overflow-auto instead of overflow-scroll
  • • Consider virtual scrolling for large lists

Accessibility Notes

  • • Ensure scrollable areas are keyboard accessible
  • • Provide focus indicators for scrollable content
  • • Don't hide important content with overflow
  • • Test with screen readers
  • • Consider reduced motion preferences

Best Practices

✅ Do

  • • Use overflow-auto for scrollable content areas
  • • Use overflow-hidden for image containers and animations
  • • Test scrolling behavior on mobile devices
  • • Provide visual indicators for scrollable content
  • • Use directional overflow for specific scroll needs
  • • Consider container queries for responsive overflow

❌ Don't

  • • Hide important content with overflow-hidden
  • • Use overflow-scroll when overflow-auto works
  • • Forget to test keyboard navigation
  • • Create horizontal scrolling on mobile unnecessarily
  • • Use overflow without considering accessibility
  • • Apply overflow to the wrong container level

Related Layout Classes

overflow-*

Current page

overscroll-*

Overscroll utilities

static

Position utilities

visible

Visibility utilities