Where the floor comes from
Every case of flexbox overflow from long content starts with one default. For most boxes, min-width starts at zero and nobody thinks about it. Flex items are different. Their initial min-width is auto, and for a flex item that is not a scroll container, the flexbox spec resolves that to a content-based minimum: roughly, the item's min-content width. The min-content width is the narrowest the content can be laid out without overflowing, which means every word on its own line.
A URL has no spaces, hyphens or other wrap opportunities in most cases, so the whole URL is one "word". The item's floor therefore becomes the full width of the URL, often several hundred pixels. The rule exists for a good reason: without it, a row of buttons squeezed by a narrow viewport would crush their labels into overlapping glyphs.
Why flex-shrink is not the lever
flex-shrink decides how a shortfall is shared among items. It does not decide how small an item may get. The flex algorithm computes each item's target size, then clamps it between its minimum and maximum. An item that hits its minimum is frozen there, and the remaining items absorb what they can. When nothing else can give way, the row is wider than its container and the flexbox overflow shows up as the item poking out of the right-hand edge.
This is also why flex: 1 does not help. It sets flex-basis to zero, which changes the starting point of the calculation, but the clamp to min-width: auto still runs afterwards. Two flex: 1 columns come out unequal the moment one holds an unbreakable string, and people go hunting for a bug in flex-basis that is not there.
The three fixes, and what each costs
min-width: 0 on the item removes the floor. The item now shrinks to whatever the algorithm gives it, and the URL overflows the item rather than the row. On its own that only moves the problem inward, so it is usually paired with a wrapping rule.
An overflow value that makes the item a scroll container (hidden, auto or scroll, but not clip) also sets the automatic minimum to zero, because a scroll container is exempt from the content-based minimum. It works, but it clips: focus rings, box shadows and any dropdown positioned inside the item get cut off. It is the right choice for a deliberate ellipsis or a scrollable code block, and the wrong one as a reflex.
overflow-wrap: anywhere on the text gives the URL wrap opportunities between any two characters when it would otherwise overflow. The detail that matters is that these opportunities count when the browser calculates min-content width. The URL's share of the floor drops to a single character, so the item can shrink even without min-width: 0. The cost is the mirror image: in a tight layout the column can now collapse to a sliver, so scope the rule to the element holding URLs rather than the whole card.
break-word looks identical and fixes nothing here
The common half-answer to flexbox overflow is overflow-wrap: break-word, and it fails in exactly this situation. Its break opportunities are deliberately ignored when min-content width is calculated. The URL can wrap once the box is narrow enough, but min-width: auto never lets the box get narrow enough, because the floor is still measured from the unbroken URL. In a plain block it behaves like anywhere; inside a flex item it appears to do nothing at all.
So a strong answer names the floor first, then picks the pairing deliberately. break-word plus min-width: 0 works, and keeps the min-content width honest for any parent sizing to content. anywhere alone also works, at the price of a floor that no longer protects the column. word-break: break-all affects min-content too, but it breaks ordinary words mid-word everywhere, which is rarely what you want in prose.
Nested flex and the grid equivalent
Real layouts nest. A page shell is a flex row of sidebar and main, the main area holds a flex row of cards, and the card holds the link. Each flex item's min-content width includes its descendants' unbreakable content, so the URL's width becomes the floor of the card, then of the main area. Releasing only the innermost item changes nothing visible, which is why nested flexbox overflow survives the first fix people try. You need min-width: 0 at every flex level between the element that is actually constrained and the text, or you fix it at the source with anywhere.
Grid has the same mechanism under a different name. A 1fr track is shorthand for minmax(auto, 1fr), and the auto minimum resolves from the items' content, so one long URL widens its column and pushes the grid past its container. Writing minmax(0, 1fr) gives the track a zero minimum, and the grid item's own automatic minimum drops away with it.
.layout {
display: grid;
grid-template-columns: 16rem minmax(0, 1fr);
}
flex-shrink shares out space; min-width decides how much there is to share. When a flex item refuses to shrink, look at its floor before you look at the flex shorthand.
© 2026 Preptima. Originally published at preptima.com (opens in a new tab).