the min-width: auto trap that breaks every flex layout
A two-column flex layout works perfectly until someone pastes a long unbroken URL into a paragraph. Suddenly the column is wider than the viewport and the page has a horizontal scrollbar. Add a tooltip in the second column and it cuts off. The cause is a default value almost nobody sets explicitly: min-width: auto.
Why the default is auto, not zero
Per Flexbox spec section 4.5, flex items have an implicit min-width: auto on the main axis (and min-height: auto on a column flex). The computed value of this auto is roughly the item’s content minimum size — the longest word, the widest image, the narrowest a replaced element can be. The flex sizing algorithm respects this floor regardless of flex-shrink.
The original CSS 2.1 default was min-width: 0. The flex spec changed it because zero would let items shrink to literally nothing, hiding their content. The change is documented in CSS Working Group issue #1350; the fix was “default to a sensible floor.”
The fix everyone copies
Set min-width: 0 on the flex item explicitly. The Mozilla devtools team published the canonical workaround in MDN’s flex troubleshooting page, and you will find it in every component library. For column flex, set min-height: 0. For the rare case where you want both, set both.
.flex-item {
min-width: 0;
/* allows shrinking past content min size */
}The other half: overflow on children
Setting min-width: 0 alone does not stop content from overflowing visually — it just lets the parent shrink. Add overflow: hidden, overflow-wrap: anywhere, or text-overflow: ellipsis on the inner content. For images, max-width: 100% handles the case. For tables nested inside flex, table-layout: fixed is usually required.
The grid version of the same trap
CSS Grid has the identical default: grid items get min-width: auto on tracks defined as fr. Long content blows out the track. Same fix: minmax(0, 1fr) instead of 1fr. Sara Soueidan’s 2019 piece “The Minimum Content Size in CSS Grid” (sarasoueidan.com) is the clearest write-up.
When to leave it alone
The default exists for a reason. If your flex item contains a single icon or fixed-width control, the auto floor is correct — it stops the item from collapsing. The trap is when the item contains arbitrary user content. Treat min-width: 0 as a deliberate opt-in for “this column may legitimately need to clip,” not as something to drop on every flex child by reflex.
Related
Get FlexFrog on the App Store. Built by Moruk Labs.