Tailwind CSS Overflow Tutorial for Beginners

Overflow controls what happens when content is too large for its container.

For example:

A card with too much text
A table wider than the screen
A fixed-height container with long content
Horizontal scrolling lists

Tailwind CSS provides simple utilities to handle all these situations without writing custom CSS.

In this guide, you will learn:

How overflow works
How to hide overflowing content
How to enable scrolling
How to control horizontal and vertical overflow
How to use responsive overflow

Let’s begin step by step.

What is Overflow in CSS?

In traditional CSS:

overflow: hidden;

In Tailwind CSS:

<div class="overflow-hidden"></div>

Very clean and readable.

Basic Overflow Utilities

Tailwind provides these main overflow classes:

overflow-auto
overflow-hidden
overflow-clip
overflow-visible
overflow-scroll

You can also control directions:

overflow-x-auto
overflow-y-auto
overflow-x-hidden
overflow-y-scroll

Example Setup Using Tailwind v4 CDN

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">

</body>
</html>

1. Showing Content That Overflows (overflow-visible)

This allows content to extend outside the container.

<div class="w-48 h-24 bg-blue-200 overflow-visible">
  <div class="w-64 h-32 bg-blue-500 text-white p-2">
    Content is visible outside the box
  </div>
</div>

Use carefully because it can break layout.

2. Hiding Overflow Content (overflow-hidden)

This clips any content that exceeds the container.

<div class="w-48 h-24 bg-green-200 overflow-hidden">
  <div class="w-64 h-32 bg-green-500 text-white p-2">
    Extra content is hidden
  </div>
</div>

Common use cases:

Cards
Image containers
Rounded elements

3. Scroll Only If Needed (overflow-auto)

Scrollbars appear only when necessary.

<div class="w-64 h-32 bg-white border overflow-auto p-4">
  <p>
    Long content goes here. If it exceeds the container height,
    scrolling will automatically appear.
  </p>
</div>

Best choice for most scrollable containers.

4. Horizontal Scroll If Needed (overflow-x-auto)

Used for tables and horizontal lists.

<div class="overflow-x-auto border p-4">
  <div class="w-[600px] bg-blue-100 p-4">
    This content is wider than the container.
  </div>
</div>

Very useful for:

Tables
Code blocks
Horizontal card sliders

5. Vertical Scroll If Needed (overflow-y-auto)

<div class="h-32 overflow-y-auto border p-4 bg-white">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
  <p>Item 6</p>
</div>

Common in:

Chat windows
Sidebar lists
Activity logs

6. Always Show Scrollbars (overflow-scroll)

Unlike overflow-auto, this always shows scrollbars.

<div class="w-64 h-32 overflow-scroll border p-4">
  <div class="w-[500px] h-[300px] bg-gray-200">
    Scroll in both directions
  </div>
</div>

Note: Some operating systems hide scrollbars automatically.

7. Horizontal Scroll Always (overflow-x-scroll)

<div class="overflow-x-scroll border p-4">
  <div class="w-[600px] bg-yellow-200 p-4">
    Always horizontal scroll
  </div>
</div>

8. Vertical Scroll Always (overflow-y-scroll)

<div class="h-32 overflow-y-scroll border p-4 bg-white">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

9. Overflow Clip (overflow-clip)

Similar to hidden but does not allow scrolling.

<div class="w-48 h-24 overflow-clip bg-red-200">
  <div class="w-64 h-32 bg-red-500">
    Clipped content
  </div>
</div>

Use when you want strict clipping.

Real-World Example: Responsive Table

<div class="overflow-x-auto bg-white shadow-md rounded-lg">
  <table class="min-w-[600px] w-full">
    <thead class="bg-gray-200">
      <tr>
        <th class="p-3 text-left">Name</th>
        <th class="p-3 text-left">Role</th>
        <th class="p-3 text-left">Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3">Andrew Alfred</td>
        <td class="p-3">Technical Advisor</td>
        <td class="p-3">Toronto</td>
      </tr>
    </tbody>
  </table>
</div>

On small screens, horizontal scrolling will appear.

Responsive Overflow

You can apply overflow conditionally.

<div class="overflow-auto md:overflow-scroll h-32 border p-4">
  Responsive overflow example
</div>

Explanation:

Mobile → scroll only if needed
Medium screen and above → always scroll

Best Practices

If you are learning Tailwind:

Use overflow-auto for most scrollable areas
Use overflow-hidden for cards and images
Use overflow-x-auto for tables
Avoid overflow-visible in structured layouts
Test behavior on mobile devices

Overflow control is critical for responsive design.

Frequently Asked Questions

What is the difference between overflow-auto and overflow-scroll?

overflow-auto shows scrollbars only when needed. overflow-scroll always shows scrollbars.

When should I use overflow-x-auto?

When content (like tables or sliders) is wider than the container.

How do I make a fixed-height scroll area?

Use:

<h1 class="text-xl font-bold"></h1>
<div class="h-32 overflow-y-auto"></div>

Can I apply overflow only on desktop?

Yes:

md:overflow-scroll

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Cursor Tutorial for Beginners (Complete Guide)

Next: Tailwind CSS Font Size Tutorial (Complete Guide for Beginners with Examples)

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us