Skip to main content

​
Overview

Use overflow utilities to control how content behaves when it exceeds the boundaries of its container. These utilities are essential for creating scrollable areas, hiding overflow, and managing content that doesn’t fit.

​
Overflow Utilities

Overflow Properties

.overflow-hiddenHiddenoverflow: hidden;Hide overflowing content
.overflow-autoAutooverflow: auto;Show scrollbars when needed

​
Overflow Hidden

Use .overflow-hidden to clip any content that overflows the container. The overflowing content will be completely hidden and not accessible via scrolling. 
<div class="w-64 h-32 overflow-hidden border border-gray rounded">
  <p class="p-4">
    This content might overflow the container and will be hidden if it does.
  </p>
</div>

​
Common Use Cases

  • Image containers that need to crop content
  • Creating clean edges on rounded containers
  • Hiding content that extends beyond boundaries
  • Creating card layouts with consistent heights
<!-- Image container with overflow hidden -->
<div class="w-full h-64 overflow-hidden rounded-lg">
  <img src="image.jpg" class="w-full h-full object-cover" alt="Cover image">
</div>

​
Overflow Auto

Use .overflow-auto to show scrollbars automatically when content overflows. Scrollbars only appear when needed, keeping the interface clean when content fits. 
<div class="w-64 h-32 overflow-auto border border-gray rounded">
  <p class="p-4">
    This content will show scrollbars when it overflows the container.
    You can scroll to see all the content.
  </p>
</div>

​
Common Use Cases

  • Scrollable content areas
  • Sidebars with long navigation lists
  • Modal content that might exceed viewport height
  • Code blocks or preformatted text
<!-- Scrollable sidebar -->
<aside class="w-64 h-screen overflow-auto bg-gray-light p-4">
  <nav class="flex flex-col gap-2">
    <a href="#" class="p-2 bg-white rounded">Link 1</a>
    <a href="#" class="p-2 bg-white rounded">Link 2</a>
    <!-- Many more links... -->
  </nav>
</aside>

​
Overflow Examples

<div class="flex gap-4 overflow-hidden">
  <div class="w-32 h-32 overflow-hidden rounded-lg">
    <img src="image1.jpg" class="w-full h-full object-cover" alt="Gallery image 1">
  </div>
  <div class="w-32 h-32 overflow-hidden rounded-lg">
    <img src="image2.jpg" class="w-full h-full object-cover" alt="Gallery image 2">
  </div>
  <div class="w-32 h-32 overflow-hidden rounded-lg">
    <img src="image3.jpg" class="w-full h-full object-cover" alt="Gallery image 3">
  </div>
</div>

​
Scrollable Content Area

<div class="max-w-2xl mx-auto">
  <div class="h-96 overflow-auto border border-gray rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-4">Scrollable Content</h2>
    <p class="mb-4">Long content that can scroll...</p>
    <p class="mb-4">More content...</p>
    <!-- Additional content that causes scrolling -->
  </div>
</div>

​
Card with Hidden Overflow

<div class="card overflow-hidden rounded-lg">
  <div class="h-48 overflow-hidden">
    <img src="hero.jpg" class="w-full h-full object-cover" alt="Card image">
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2">Card Title</h3>
    <p class="text-gray">Card content</p>
  </div>
</div>

​
Modal with Scrollable Content

<div class="fixed inset-0 z-50 flex items-center justify-center">
  <div class="bg-white rounded-lg max-w-md w-full mx-4 max-h-96 overflow-auto">
    <div class="p-6">
      <h3 class="text-xl font-semibold mb-4">Modal Title</h3>
      <p class="mb-4">Modal content that might be long...</p>
      <!-- More content that can scroll -->
    </div>
  </div>
</div>

​
Best Practices

1

Use Hidden for Images

Combine .overflow-hidden with .object-cover for image containers to create clean, cropped images.
2

Use Auto for Scrollable Content

Use .overflow-auto for content areas that might exceed their container height, ensuring users can access all content.
3

Consider Mobile

Test overflow behavior on mobile devices where screen space is limited.
4

Maintain Accessibility

Ensure scrollable content is keyboard accessible and screen reader friendly.

​
Common Patterns

​
Rounded Container with Hidden Overflow

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

​
Horizontal Scrollable List

<div class="overflow-auto">
  <div class="flex gap-4" style="width: max-content;">
    <div class="w-48 p-4 bg-gray-light rounded">Item 1</div>
    <div class="w-48 p-4 bg-gray-light rounded">Item 2</div>
    <div class="w-48 p-4 bg-gray-light rounded">Item 3</div>
  </div>
</div>

Display

Display utilities for container behavior

Object Fit

Control how images fit in containers

Sizing

Width and height utilities

Layout

All layout utilities overview