Overflow

Controls what happens to content that extends beyond its container's boundaries. This is essential for managing how scrolling behaves, whether content should be clipped, or if scrollbars should appear. In Tailwind v4, overflow utilities have improved handling with modern scrolling behaviors and are fully compatible with other layout utilities.

Layout2 variants4 examples

Official Docs Open Playground

Basic usage:

<div class="overflow-hidden h-32 w-full bg-gray-100 rounded">
  <p class="p-4">This content is clipped if it overflows the container height...</p>
  <p class="p-4">Additional content that extends beyond the visible area will be hidden.</p>
  <p class="p-4">More content to demonstrate overflow.</p>
</div>

Examples

Hidden overflow - content extending beyond container is clipped

<div class="overflow-hidden h-32 w-full bg-gray-100 rounded">
  <p class="p-4">This content is clipped if it overflows the container height...</p>
  <p class="p-4">Additional content that extends beyond the visible area will be hidden.</p>
  <p class="p-4">More content to demonstrate overflow.</p>
</div>

Edit in playground

Auto overflow - scrollbars appear only when content overflows

<div class="overflow-auto h-32 w-full bg-gray-100 rounded">
  <p class="p-4">This container has scrollbars when needed...</p>
  <p class="p-4">Additional content that extends beyond the visible area can be scrolled to.</p>
  <p class="p-4">More content to demonstrate overflow.</p>
  <p class="p-4">Even more content to ensure scrolling is necessary.</p>
</div>

Edit in playground

Horizontal-only scrolling container for a card carousel

<!-- Horizontal scrolling container -->
<div class="overflow-x-auto overflow-y-hidden h-32 w-full bg-gray-100 rounded">
  <div class="flex space-x-4 p-4">
    <div class="flex-shrink-0 w-48 h-20 bg-blue-200 rounded-lg flex items-center justify-center">Card 1</div>
    <div class="flex-shrink-0 w-48 h-20 bg-blue-300 rounded-lg flex items-center justify-center">Card 2</div>
    <div class="flex-shrink-0 w-48 h-20 bg-blue-400 rounded-lg flex items-center justify-center">Card 3</div>
    <div class="flex-shrink-0 w-48 h-20 bg-blue-500 rounded-lg flex items-center justify-center">Card 4</div>
    <div class="flex-shrink-0 w-48 h-20 bg-blue-600 rounded-lg flex items-center justify-center">Card 5</div>
  </div>
</div>

Edit in playground

Code block with scrollable content - common pattern for displaying code samples

<!-- Code block with scroll -->
<div class="max-w-xl bg-gray-800 rounded-lg shadow-lg overflow-hidden">
  <div class="flex items-center px-4 py-2 bg-gray-900">
    <div class="h-3 w-3 rounded-full bg-red-500 mr-2"></div>
    <div class="h-3 w-3 rounded-full bg-yellow-500 mr-2"></div>
    <div class="h-3 w-3 rounded-full bg-green-500"></div>
  </div>
  <div class="overflow-auto max-h-80 p-4 text-sm font-mono text-gray-200">
    <pre>// This code block has overflow-auto to allow scrolling
function exampleCode() {
  const longFunction = () => {
    console.log("This is a long function");
    console.log("With multiple lines");
    console.log("To demonstrate scrolling");
    return Array(50).fill(0).map((_, i) => `Line ${i + 1} of the output`);
  };
  
  return longFunction();
}</pre>
  </div>
</div>

Edit in playground

Live Preview

Try the Overflow utility with different values

Open Interactive Playground

Variants

auto: adds scrollbars only when necessary; hidden: clips overflow content with no scrollbars; clip: like hidden but doesn't allow scrolling interactions at all; visible: content can overflow without being clipped; scroll: always shows scrollbars even when not needed

autohiddenclipvisiblescroll