How I Fixed a Weird Flexbox Bug (and Saved My Sanity)
Have you ever spent hours trying to figure out why your Flexbox layout is completely falling apart? Same here. Just yesterday, I hit a wall trying to make a simple layout work—and what I found might save you from the same headache.
In this post, I’ll walk you through what went wrong, how I fixed it, and the one magic Tailwind class that made everything click. If you're using Tailwind and have a basic understanding of how Flexbox works in the browser, you're in the right place.
Let’s dive in!
🔧 Building a Full-Screen Flexbox Layout
Here’s the layout we’ll be working with: a classic full-screen structure with a sticky header at the top, a sticky footer at the bottom, a sidebar on the left, and a scrollable main content area.
Pretty straightforward, right?
Let’s set this up with some Tailwind classes:
And boom 💥 — looks great! Time to reward ourselves with a coffee ☕️.
😱 The Scrollable Section That Wouldn’t Scroll
Now let’s add a scrollable list to the main content area. Naturally, we throw in overflow-scroll and expect it to work.
And then... 🥁 drum roll...
Wait, what?! The list overflows the container, and the scrollbar is nowhere to be seen. Our layout is broken. Again.
Looks like it’s time for another cup of coffee (or three) ☕️☕️☕️.
💡 The Fix: min-h-0 to the Rescue
Here’s the fix: add just one Tailwind class — min-h-0 — to the flex child container.
Instantly, everything starts working. The list scrolls. The layout behaves. Sanity is restored.
But why does this work?
Here’s the deal: by default, Flexbox sets min-height: auto on flex items. This means the item won't shrink below the size of its content—even if it's inside a container that should be scrollable.
Adding min-h-0 (or min-w-0 for horizontal layouts) explicitly tells the browser:
It’s not a hack—it’s part of the spec! Check it out in the official spec.
👋 Wrapping Up
In this article, we built a full-screen layout with Flexbox and uncovered a subtle (but critical) quirk when dealing with scrollable content. The key takeaway? If your flex child won’t scroll, try adding min-h-0.
Thanks for reading! If this helped you out, you might also enjoy my previous post:
Until next time — happy coding! 🧑💻