How does intrinsic sizing work?
min-content, max-content, fit-content, and the `min-width: auto` rule that makes flex items refuse to shrink.
- Level
- DEVELOPER
- Read time
- 08 min
- Experiment
- Available
- Type
- INTERACTIVE
The question
A flex item containing a long string blows out of its container even though it has width: 100% and overflow: hidden. Why won't it shrink?
Hypothesis
Flex and grid items have an automatic minimum size equal to their min-content size. Until you override it, the item cannot become smaller than its longest unbreakable word.
Method
Laboratory available
The instrument for this investigation runs in the laboratory, where the controls, the live model and the observation log share one workstation.
Enter the laboratoryResize the container and switch the item's sizing keyword. Watch where the content wraps, and what min-width: auto does to a flex item.
What we observed
| Keyword | Meaning | Roughly |
|---|---|---|
| min-content | Smallest size without overflowing content | The longest unbreakable word |
| max-content | Size if it never wrapped | The whole string on one line |
| fit-content | clamp(min-content, available, max-content) | Shrink-to-fit |
| auto (flex item) | Resolves to the content-based minimum size | Usually min-content |
Why it happens
Flex items get min-width: auto in the inline axis by default, and auto resolves to a content-based minimum. That is why flex: 1 alone does not let a cell shrink below its longest word, and why every truncation recipe on the internet contains the same line:
.flex-child { flex: 1; min-width: 0; /* opt out of the automatic minimum size */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}/* Grid equivalent: 1fr means minmax(auto, 1fr) */.grid { grid-template-columns: minmax(0, 1fr) auto; }Further research
Intrinsic sizes are expensive: computing max-content requires laying out the content as if the line were infinite. Browsers cache them aggressively, but a deeply nested fit-content/auto table-like structure can force repeated intrinsic passes. If layout is your bottleneck, replacing auto columns with explicit tracks is often the single biggest win.
References
- 01W3CCSS Box Sizing Module Level 3, intrinsic sizes
- 02CSS Flexbox Level 1min-width: auto on flex items
- 03MDNminmax()