❮ Previous

Overflow Handling

  • Manage overflow behavior using Tailwind utilities.

  • What is Overflow in CSS ?

    Overflow occurs when content does not fit inside its container.

    This can happen due to:

    • Fixed width / height containers

    • Large images or text

    • Dynamic content (lists, chat messages)

    • Responsive resizing

    If overflow is not handled:

    • Layout breaks

    • Content overlaps

    • UI becomes unusable

      In Tailwind CSS, overflow is controlled using explicit, predictable utilities.

      Why Overflow Handling is Important

      Real-world interfaces constantly deal with overflow:

      • Cards with long text

      • Modals with scrolling content

      • Tables wider than screen

      • Dropdowns with many items

      • Chat or notification panels

      Overflow handling ensures:

      • Layout stability

      • Content accessibility

      • Better user experience

      Overflow Utilities in Tailwind CSS

      Tailwind provides utilities that map directly to CSS overflow properties.

      Basic Syntax

      overflow-{value}

      overflow-x-{value}

      overflow-y-{value}

      Core Overflow Values

      UtilityEffect
      overflow-hiddenHides overflowing content
      overflow-autoAdds scroll only if needed
      overflow-scrollAlways shows scrollbar
      overflow-visibleAllows overflow (default)

      Directional variants:

      • overflow-x-* → horizontal

      • overflow-y-* → vertical

      overflow-hidden

      What It Does

      Hides any content that exceeds the container boundary.

    Overflow Hidden

    overflow-hidden hides any content that extends beyond the container’s width or height. 

    <div class="w-64 h-32 overflow-hidden bg-gray-200">
  <p>
    This content is too long and will be clipped.
  </p>
</div>

    • Common Use Cases

      • Image cropping

      • Preventing layout break

      • Hiding decorative overflow

        Use carefully - hidden content becomes inaccessible.

        overflow-auto

        What It Does

        Adds scrollbars only when content overflows.

      Overflow Auto

      overflow-auto adds scrollbars only when the content exceeds the container size. 

      <div class="h-32 overflow-auto border p-2">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
</div>

      • Why It’s Preferred

        • No unnecessary scrollbars

        • Cleaner UI

        • Better UX

        Used in:

        • Modals

        • Dropdowns

        • Chat windows

        overflow-scroll

        What It Does

        Forces scrollbars even if content fits.

      Overflow Scroll

      overflow-scroll always shows scrollbars even if the content does not overflow. 

      <div class="h-32 overflow-scroll border">
  Fixed scrollbar
</div>

      • Use Case

        • Rare

        • Mostly for debugging

        • Sometimes used for consistent scrollbar layout

        Generally avoided in production UI.

        overflow-visible

        What It Does

        Allows content to overflow outside the container.

        This is the default browser behavior.

      Overflow Visible

      overflow-visible allows content to extend outside the container boundaries. 

      <div class="w-32 h-16 overflow-visible bg-gray-200">
  <span class="bg-red-400">Overflowing text</span>
</div>

      • Use Case

        • Tooltips

        • Badges

        • Decorative elements

        Directional Overflow Control

        Horizontal Overflow (overflow-x)

        Used when content is wider than the container.

      Horizontal Overflow

      overflow-x-auto adds a horizontal scrollbar when content is wider than the container. 

      <div class="overflow-x-auto">
  <table class="min-w-full">
    <!-- wide table -->
  </table>
</div>

      • This is essential for responsive tables.

        Vertical Overflow (overflow-y)

        Used for scrollable vertical content.

      Vertical Overflow Scroll

      max-h-40 limits height and overflow-y-auto adds a vertical scrollbar when content overflows. 

      <div class="max-h-40 overflow-y-auto">
  Long vertical list
</div>
      • Real-World UI Examples

      Overflow UI

      overflow-y-auto, overflow-hidden, and overflow-x-auto control scrolling or clipping in modals, cards, and responsive tables. 

      <!-- Modal Body Scrolling -->
<div class="fixed inset-0 flex items-center justify-center">
  <div class="bg-white w-96 max-h-96 overflow-y-auto p-4">
    Modal content
  </div>
</div>

<!-- Card with Limited Height -->
<div class="h-48 overflow-hidden p-4 border">
  Image or long content
</div>

<!-- Responsive Table -->
<div class="overflow-x-auto">
  <table class="min-w-full border">
    <!-- table rows -->
  </table>
</div>

      • Overflow & Layout Interaction

        Overflow utilities often work together with:

        • Height (h-*, max-h-*)

        • Width (w-*, max-w-*)

        • Positioning

        • Flexbox or grid

        Overflow alone does nothing without size constraints.

        Common Mistakes

        • Using overflow-hidden everywhere

        • Forgetting to set height / max-height

        • Breaking accessibility by hiding content

        • Ignoring horizontal overflow on mobile

        • Using scroll when not needed

        Overflow should solve problems, not hide them.

        Best Practices for Overflow Handling

        • Use overflow-auto for user content

        • Use overflow-hidden for decorative cropping

        • Handle horizontal overflow on small screens

        • Combine with size utilities

        • Test with real content length

      ❮ Previous