Last month I spent three hours debugging a layout issue that turned out to be two lines of CSS. I’m writing this down so future-me (and maybe you) doesn’t make the same mistake.
The Setup
I had a flex container with a child that needed to shrink-wrap its content. The child contained a list of tags that could wrap to multiple lines. Simple enough.
.container {
display: flex;
gap: 1rem;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}The Problem
On most screen sizes, everything looked fine. But at certain widths, the tags container would expand to fill the entire flex row instead of shrink-wrapping its content. The tags would spread out with huge gaps between them.
The Investigation
I went through the usual debugging steps. DevTools inspection showed no unexpected margins or padding. No rogue width: 100% anywhere. The computed styles looked clean.
The issue only appeared when the tags wrapped to exactly two lines at specific container widths. One line? Fine. Three lines? Fine. Two lines at certain widths? Broken.
The Root Cause
The problem was flex-shrink and flex-basis. By default, flex items have flex: 0 1 auto, which means flex-basis: auto. With auto basis, the browser uses the content’s intrinsic size.
But here’s the subtle part: the intrinsic size of a wrapping flex container depends on the available width, which depends on the flex layout, which depends on the intrinsic size. It’s circular.
Different browsers resolve this circularity differently, and the result at certain widths was the tags container claiming more space than it visually needed.
The Fix
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
min-width: 0; /* Allow shrinking below content size */
flex-basis: 0; /* Don't use intrinsic size */
flex-grow: 1;
}Two key changes: min-width: 0 (the classic flex overflow fix) and switching from flex-basis: auto to flex-basis: 0 with flex-grow: 1. This tells the browser to distribute space proportionally instead of trying to calculate intrinsic sizes.
The Takeaway
Flexbox intrinsic sizing is one of those areas where the spec is complex and browser behavior can surprise you. When you see layout bugs that only appear at specific widths, check your flex-basis and min-width values. The shrinkwrap assumption (“this container will be as small as its content”) doesn’t always hold in flex contexts.
The best debugging tool for these issues is resizing the browser window slowly and watching exactly when the layout breaks. The breakpoint width often reveals which container is misbehaving.