Tailwind CSS Overflow

Overflow in CSS refers to how content is managed when it exceeds the dimensions of a bounding box, such as the width or height of a container. By defining overflow properties, developers can control whether overflowing content is clipped, visible, or scrollable.

Tailwind CSS helps you easily manage overflow behaviors with pre-configured utilities that directly map to the native CSS overflow, overflow-x, and overflow-y properties. These utilities are highly responsive, which makes it easy to apply styles conditionally across different screen sizes or states.

Class	Properties	Example
`overflow-auto`	`overflow: auto;`	`<div className="overflow-auto"></div>`
`overflow-hidden`	`overflow: hidden;`	`<div className="overflow-hidden"></div>`
`overflow-clip`	`overflow: clip;`	`<div className="overflow-clip"></div>`
`overflow-visible`	`overflow: visible;`	`<div className="overflow-visible"></div>`
`overflow-scroll`	`overflow: scroll;`	`<div className="overflow-scroll"></div>`
`overflow-x-auto`	`overflow-x: auto;`	`<div className="overflow-x-auto"></div>`
`overflow-y-auto`	`overflow-y: auto;`	`<div className="overflow-y-auto"></div>`
`overflow-x-hidden`	`overflow-x: hidden;`	`<div className="overflow-x-hidden"></div>`
`overflow-y-hidden`	`overflow-y: hidden;`	`<div className="overflow-y-hidden"></div>`
`overflow-x-clip`	`overflow-x: clip;`	`<div className="overflow-x-clip"></div>`
`overflow-y-clip`	`overflow-y: clip;`	`<div className="overflow-y-clip"></div>`
`overflow-x-visible`	`overflow-x: visible;`	`<div className="overflow-x-visible"></div>`
`overflow-y-visible`	`overflow-y: visible;`	`<div className="overflow-y-visible"></div>`
`overflow-x-scroll`	`overflow-x: scroll;`	`<div className="overflow-x-scroll"></div>`
`overflow-y-scroll`	`overflow-y: scroll;`	`<div className="overflow-y-scroll"></div>`

Overview of Overflow

This section explains how Tailwind CSS can be used to define how content acts when it overflows its container.

Displaying Overflowing Content

By default, an element's overflow is visible in CSS. This means that if content exceeds the dimensions of its container (e.g., a text string, an image, or a block of elements), it will remain visible outside the box.

You can use the overflow-visible utility in Tailwind to enforce this behavior. This use case is common when you want to allow text or images to spill over freely without containment.

This is a live editor. Play around with it!

export default function OverflowVisibleExample() {
  return (
    <div className="w-48 h-20 bg-gray-200 p-4 overflow-visible">
      {/* overflow: visible */}
      <p className="text-sm">
        Small box with overflowing text that remains visible outside the container.
      </p>
    </div>
  );
}

Clipping Overflowing Content

To hide extra content that does not fit within its container, apply Tailwind's overflow-hidden utility. This clips the content rather than showing it (the CSS value is overflow: hidden). It is useful in layouts where clean boundaries are critical.

This is a live editor. Play around with it!

export default function OverflowHiddenExample() {
  return (
    <div className="w-48 h-20 bg-gray-200 p-4 overflow-hidden">
      {/* overflow: hidden */}
      <p className="text-sm">
        This text is intentionally too long and will be hidden when it overflows the box.
      </p>
    </div>
  );
}

Adding Scrollbars as Needed

When content overflows its container, you might want to make it scrollable only when necessary.

This can be achieved in Tailwind using the overflow-auto utility. It is appropriate for scenarios like chat boxes or content previews where dynamic data may expand the container unpredictably.

This is a live editor. Play around with it!

export default function OverflowAutoExample() {
  return (
    <div className="w-48 h-20 bg-gray-200 p-4 overflow-auto">
      {/* overflow: auto */}
      <p>
        This content overflows vertically and triggers a scrollbar to manage the overflow.
      </p>
    </div>
  );
}

Horizontal Scrolling for Extra-Wide Content

With Tailwind's overflow-x-auto utility, you can allow horizontal scrolling when necessary. This is often used for wide tables or long lists.

In the below example, a horizontal scrollbar appears if the table extends beyond the designated width.

This is a live editor. Play around with it!

export default function HorizontalScrollExample() {
  return (
    <div className="w-48 bg-gray-200 overflow-x-auto">
      {/* overflow-x: auto */}
      <table className="table-auto border-collapse border border-gray-300">
        <thead>
          <tr>
            <th className="px-4 py-2 border">Name</th>
            <th className="px-4 py-2 border">Age</th>
            <th className="px-4 py-2 border">Gender</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="px-4 py-2 border">Alice</td>
            <td className="px-4 py-2 border">25</td>
            <td className="px-4 py-2 border">Female</td>
          </tr>
          <tr>
            <td className="px-4 py-2 border">Bob</td>
            <td className="px-4 py-2 border">30</td>
            <td className="px-4 py-2 border">Male</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Vertical Scrolling for Long Content

To scroll vertically as needed, apply Tailwind's overflow-y-auto utility. This is useful for long lists or vertically stacked elements like dropdown menus or sidebar content.

This is a live editor. Play around with it!

export default function VerticalScrollExample() {
  return (
    <div className="w-48 h-20 bg-gray-200 overflow-y-auto">
      {/* overflow-y: auto */}
      <ul className="list-disc pl-5">
        {Array.from({ length: 10 }).map((_, index) => (
          <li key={index} className="py-1">List item {index + 1}</li>
        ))}
      </ul>
    </div>
  );
}

Forcing Horizontal Scrolling

If you need horizontal scrolling regardless of content size, use the overflow-x-scroll utility.

This is a live editor. Play around with it!

export default function HorizontalForceScrollExample() {
  return (
    <div className="w-48 bg-gray-200 overflow-x-scroll">
      {/* overflow-x: scroll */}
      <div className="whitespace-nowrap">
        This is a longer text that will scroll horizontally no matter what.
      </div>
    </div>
  );
}

Forcing Vertical Scrolling

To enforce vertical scrolling, the overflow-y-scroll utility ensures that a scrollbar is always present, regardless of the content's size.

This is a live editor. Play around with it!

export default function VerticalForceScrollExample() {
  return (
    <div className="w-48 h-20 bg-gray-200 overflow-y-scroll">
      {/* overflow-y: scroll */}
      <p>
        Even if this content is not long enough to exceed the container, a vertical scrollbar is displayed.
      </p>
    </div>
  );
}

Full-Direction Scrolling

To create content that can scroll in all directions, combine the overflow-scroll utility in Tailwind CSS.

This is a live editor. Play around with it!

export default function AllDirectionScrollExample() {
  return (
    <div className="w-48 h-20 bg-gray-200 overflow-scroll">
      {/* overflow: scroll */}
      <table className="table-auto border-collapse border border-gray-300">
        <thead>
          <tr>
            <th className="px-4 py-2 border">Name</th>
            <th className="px-4 py-2 border">Age</th>
            <th className="px-4 py-2 border">Gender</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="px-4 py-2 border">Alice</td>
            <td className="px-4 py-2 border">25</td>
            <td className="px-4 py-2 border">Female</td>
          </tr>
          <tr>
            <td className="px-4 py-2 border">Bob</td>
            <td className="px-4 py-2 border">30</td>
            <td className="px-4 py-2 border">Male</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

States and Responsiveness

Tailwind allows applying overflow utilities conditionally using state classes like hover or responsive breakpoints like md and sm.

Hover and Focus States

You can dynamically modify overflow properties when an element is hovered over. The overflow content becomes visible on hover in the below example.

This is a live editor. Play around with it!

export default function HoverOverflowExample() {
  return (
    <div className="w-48 h-20 bg-gray-200 overflow-hidden hover:overflow-visible transition-all">
      {/* Default: overflow-hidden, Hover: overflow-visible */}
      <p>
        On hover, this text becomes completely visible and reveals its full content.
      </p>
    </div>
  );
}

Breakpoint Modifiers

Tailwind's responsive design capabilities allow setting different overflow properties depending on screen size.

This is a live editor. Play around with it!

export default function ResponsiveOverflowExample() {
  return (
    <div className="w-20 sm:w-48 md:w-64 p-2 bg-gray-200">
      <div className="overflow-hidden sm:overflow-auto">
        {/* Default: overflow-hidden, sm and above: overflow-auto */}
        <p className="text-xs md:text-sm">
          The overflow behavior adapts to the screen size for responsive tooltips or text blocks.
        </p>
      </div>
    </div>
  );
}

Real World Examples

News Feed with Scrollable Comments Section

A news article component with a fixed-height comments section that scrolls vertically.

This is a live editor. Play around with it!

export default function NewsFeedArticle() {
  const newsData = {
    title: "The Future of AI in 2024",
    image: "https://images.unsplash.com/photo-1677442136019-21780ecad995",
    content: "Artificial Intelligence continues to evolve...",
    comments: [
      { id: 1, user: "John Doe", text: "This is fascinating!", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" },
      { id: 2, user: "Jane Smith", text: "Great insights!", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80" },
      { id: 3, user: "Mike Johnson", text: "I disagree with some points.", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e" },
      { id: 4, user: "Sarah Williams", text: "Looking forward to more!", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330" },
    ]
  };

  return (
    <div className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg">
      <img 
        src={newsData.image} 
        alt="AI Technology" 
        className="w-full h-64 object-cover rounded-t-lg"
      />
      <div className="p-6">
        <h2 className="text-2xl font-bold mb-4">{newsData.title}</h2>
        <p className="text-gray-700 mb-6">{newsData.content}</p>
        
        <div className="h-60 overflow-y-auto border rounded-lg p-4">
          {newsData.comments.map((comment) => (
            <div key={comment.id} className="flex items-start space-x-4 mb-4">
              <img 
                src={comment.avatar} 
                alt={comment.user} 
                className="w-10 h-10 rounded-full object-cover"
              />
              <div>
                <p className="font-semibold">{comment.user}</p>
                <p className="text-gray-600">{comment.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Product Gallery with Horizontal Scroll

A horizontal scrolling product gallery with overflow controls.

This is a live editor. Play around with it!

export default function ProductGallery() {
  const products = [
    {
      id: 1,
      name: "Leather Backpack",
      price: "$129.99",
      image: "https://images.unsplash.com/photo-1622560480605-d83c853bc5c3",
      alt: "Brown leather backpack"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      price: "$199.99",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Smart Watch",
      price: "$299.99",
      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Modern smartwatch"
    },
    {
      id: 4,
      name: "Sunglasses",
      price: "$89.99",
      image: "https://images.unsplash.com/photo-1572635196237-14b3f281503f",
      alt: "Designer sunglasses"
    },
    {
      id: 5,
      name: "Running Shoes",
      price: "$159.99",
      image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff",
      alt: "Sports running shoes"
    }
  ];

  return (
    <div className="max-w-6xl mx-auto p-6">
      <h2 className="text-2xl font-bold mb-6">Trending Products</h2>
      <div className="overflow-x-auto overflow-y-hidden scrollbar-hide">
        <div className="flex space-x-6 pb-4 min-w-max">
          {products.map((product) => (
            <div key={product.id} className="w-72 flex-shrink-0">
              <div className="bg-white rounded-lg shadow-md overflow-hidden">
                <img 
                  src={product.image} 
                  alt={product.alt}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="font-semibold text-lg">{product.name}</h3>
                  <p className="text-blue-600 font-bold mt-2">{product.price}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Dashboard Card with Truncated Content

A dashboard card component with truncated text and expandable content.

This is a live editor. Play around with it!

export default function DashboardCard() {
  const dashboardData = {
    cards: [
      {
        id: 1,
        title: "Monthly Revenue Report",
        summary: "Revenue has increased by 25% compared to last month. Key factors include successful marketing campaigns, new product launches, and improved customer retention rates. Further analysis shows strong performance in the mobile device category.",
        image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
        alt: "Revenue graph"
      },
      {
        id: 2,
        title: "Customer Satisfaction",
        summary: "Customer satisfaction scores have maintained a steady 4.8/5 rating throughout Q3. Positive feedback particularly highlights our customer service response times and product quality.",
        image: "https://images.unsplash.com/photo-1552581234-26160f608093",
        alt: "Customer satisfaction chart"
      }
    ]
  };

  return (
    <div className="max-w-4xl mx-auto p-6 grid gap-6 md:grid-cols-2">
      {dashboardData.cards.map((card) => (
        <div key={card.id} className="bg-white rounded-xl shadow-lg overflow-hidden">
          <img 
            src={card.image} 
            alt={card.alt}
            className="w-full h-40 object-cover"
          />
          <div className="p-6">
            <h3 className="text-xl font-bold mb-3">{card.title}</h3>
            <div className="relative">
              <p className="text-gray-600 overflow-hidden line-clamp-2">
                {card.summary}
              </p>
              <div className="absolute bottom-0 right-0 bg-gradient-to-l from-white via-white to-transparent w-20 h-full">
                <button className="absolute bottom-0 right-0 text-blue-600 font-semibold">
                  More
                </button>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Image Gallery with Overlay Captions

An image gallery that hides the image overflow on hover.

This is a live editor. Play around with it!

export default function ImageGallery() {
  const galleryImages = [
    {
      id: 1,
      src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05",
      alt: "Nature landscape",
      caption: "Misty Mountain Morning",
      photographer: "John Anderson"
    },
    {
      id: 2,
      src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e",
      alt: "Forest view",
      caption: "Dense Forest Path",
      photographer: "Sarah Chen"
    },
    {
      id: 3,
      src: "https://images.unsplash.com/photo-1426604966848-d7adac402bff",
      alt: "Lake view",
      caption: "Calm Lake Reflection",
      photographer: "Mike Roberts"
    },
    {
      id: 4,
      src: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e",
      alt: "Sunset view",
      caption: "Golden Hour Valley",
      photographer: "Emma Wilson"
    }
  ];

  return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
        {galleryImages.map((image) => (
          <div key={image.id} className="relative group overflow-hidden rounded-xl">
            <img 
              src={image.src} 
              alt={image.alt}
              className="w-full h-96 object-cover transform group-hover:scale-110 transition-transform duration-300"
            />
            <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-300">
              <div className="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                <h3 className="text-2xl font-bold mb-2">{image.caption}</h3>
                <p className="text-sm">Photo by {image.photographer}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Chat Interface with Message History

A chat interface with scrollable message history and fixed input area.

This is a live editor. Play around with it!

export default function ChatInterface() {
  const chatData = {
    messages: [
      {
        id: 1,
        user: "Alice",
        avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
        message: "Hey, how's the project coming along?",
        time: "9:00 AM"
      },
      {
        id: 2,
        user: "Bob",
        avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
        message: "Making good progress! Just finished the front-end components.",
        time: "9:02 AM"
      },
      {
        id: 3,
        user: "Alice",
        avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
        message: "That's great! Can you share a preview?",
        time: "9:05 AM"
      },
      {
        id: 4,
        user: "Bob",
        avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
        message: "Sure, I'll send it over in a moment.",
        time: "9:07 AM"
      }
    ]
  };

  return (
    <div className="max-w-2xl mx-auto h-[600px] bg-white rounded-xl shadow-lg flex flex-col">
      <div className="p-4 border-b">
        <h2 className="text-xl font-bold">Team Chat</h2>
      </div>
      
      <div className="flex-1 overflow-y-auto p-4">
        {chatData.messages.map((message) => (
          <div key={message.id} className="flex items-start space-x-3 mb-6">
            <img 
              src={message.avatar} 
              alt={message.user} 
              className="w-10 h-10 rounded-full"
            />
            <div className="flex-1">
              <div className="flex items-baseline">
                <h3 className="font-semibold">{message.user}</h3>
                <span className="ml-2 text-sm text-gray-500">{message.time}</span>
              </div>
              <p className="mt-1 text-gray-700 bg-gray-100 rounded-lg p-3 inline-block">
                {message.message}
              </p>
            </div>
          </div>
        ))}
      </div>
      
      <div className="p-4 border-t">
        <div className="flex space-x-3">
          <input
            type="text"
            placeholder="Type your message..."
            className="flex-1 rounded-lg border p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
            Send
          </button>
        </div>
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

When working with Tailwind CSS Overflow utilities, maintaining a consistent design across all components is crucial for delivering a polished user experience. This involves ensuring that the appearance of scrollable areas, clipped content, and overflow effects adhere to predefined design patterns.

For instance, using overflow-hidden for modals and overflow-x-scroll for horizontal carousels can standardize the behavior of content-heavy sections. Similarly, integrating consistent padding or margins (e.g., p-4, m-4) alongside overflow utilities results in aesthetically uniform layouts across multiple elements.

Another essential practice is aligning the overflow settings with the project's grid or layout system. For example, coupling utilities like overflow-y-auto with max-h helps maintain visual harmony, especially in card-based designs or components like sidebar menus.

Leverage Utility Combinations

Combine overflow utilities with padding, spacing, or positioning utilities to create better modular designs.

In the below example, the overflow-y-auto utility ensures the content remains scrollable while the header remains fixed at the top. Additional utilities like spacing and padding enhance readability.

This is a live editor. Play around with it!

export default function FixedHeaderLayout() {
  return (
    <div className="h-screen flex flex-col">
      <header className="bg-blue-600 text-white p-4 flex-shrink-0">
        <h1 className="text-xl font-semibold">Fixed Header</h1>
      </header>
      <main className="flex-1 overflow-y-auto bg-gray-50 p-6">
        <div className="space-y-4">
          {Array.from({ length: 20 }).map((_, idx) => (
            <p key={idx} className="p-4 bg-white rounded-lg shadow">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. {idx + 1}
            </p>
          ))}
        </div>
      </main>
    </div>
  );
}

Accessibility Considerations

Enhance Readability and Navigability

Overflowing content, such as scrollable areas, should remain readable and navigable. Ensure important information isn't obscured and support clear focus indicators for users navigating with a keyboard or other assistive devices.

This is a live editor. Play around with it!

export default function AccessibleFAQ() {
  const faqs = Array.from({ length: 10 }).map((_, idx) => ({
    id: idx,
    question: `Question ${idx + 1}`,
    answer: `Answer for question ${idx + 1}. Lorem ipsum dolor sit amet.`,
  }));

  return (
    <div className="max-w-lg mx-auto">
      <h2 className="text-2xl font-semibold mb-4">Frequently Asked Questions</h2>
      <div
        className="overflow-y-auto h-64 border rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
        tabIndex="0"
      >
        {faqs.map((faq) => (
          <div tabindex={faq.id} key={faq.id} className="mb-3">
            <h3 className="font-bold">{faq.question}</h3>
            <p className="text-gray-700">{faq.answer}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Here, the scrollable FAQ section is focusable, ensuring that keyboard users can easily interact with its content while maintaining strong accessibility.

Support Accessible Interactive Elements

Interactive components, such as dropdowns or modals, should prioritize usability by ensuring users can navigate scrollable content smoothly without confusion.

This is a live editor. Play around with it!

import {useState} from 'react'

        export default function AccessibleDropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const options = Array.from({ length: 15 }).map((_, idx) => `Option ${idx + 1}`);

  return (
    <div className="relative inline-block">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="bg-blue-600 text-white px-4 py-2 rounded-lg"
      >
        Toggle Menu
      </button>
      {isOpen && (
        <ul
          className="absolute mt-2 w-48 bg-white border shadow-lg overflow-y-auto max-h-40 rounded-lg focus:outline-none"
          role="menu"
          tabIndex="0"
        >
          {options.map((option, idx) => (
            <li
              key={idx}
              className="px-4 py-2 hover:bg-gray-100 text-sm"
              role="menuitem"
              tabIndex={-1}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Columns Break After