Intrinsic and Extrinsic Sizing
Intrinsic sizing derives an element size from its content — min-content, fit-content, max-content — while extrinsic sizing imposes sizes from the outside via width, flex, or grid tracks.
Definition
Intrinsic sizing computes dimensions from content: min-content is the narrowest a box can be without overflow, max-content is the size ignoring soft wrap opportunities, and fit-content clamps to available space. Extrinsic sizing assigns sizes from containers, percentages, or track definitions. Layout problems often trace to mixing them unintentionally.
Context and scope
Explains overflowing tables, unbreakable buttons, sidebar blowouts from long words, and flexible layouts that need minmax, fit-content, or min-width: 0 rescue rules.
Common misconceptions
- Flex children shrink to content — a flex item defaults to min-width auto, so long content refuses to shrink and overflows until overridden
- max-content is the natural width — it is the width assuming no wrapping, which is often far wider than the viewport
- Grid tracks are always fixed or fractional — auto tracks size intrinsically from their content
Anti-patterns
- Building side-by-side panels without min-width: 0 on flex children and shipping overflow on long strings
- Setting width: max-content on cards in a grid and blowing out the track sizing under narrow viewports
- Fighting intrinsic table width with overflow hacks instead of table-layout and max-width constraints
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/CSS/max-content
What it is
Boxes get sizes two ways: someone tells them the size, or they measure their content. min-content answers how narrow can this be — the widest unbreakable word or element. max-content answers how wide if nothing ever wraps. Available space reconciles the two through fit-content.
How it works
Percentage and fixed widths are extrinsic. Flex-basis, grid tracks, and table cells lean intrinsic. A flex item with min-width auto cannot shrink below its min-content, the classic broken sidebar; min-width: 0 restores extrinsic control. Grid minmax mixes both per track, letting content define the floor while the layout defines the ceiling.
When to care
Every responsive layout that must survive long words, wide tables, and locale expansion. Test with oversized strings and CJK or German text. overflow-wrap and hyphenation complement sizing when content must yield.
Pitfalls
Intrinsic sizing propagates: a max-content child can force a track wider than the container, and the overflow appears far from the cause. fit-content arguments set a preferred size while available space still clamps. Debug by drawing min-content widths, not by sprinkling overflow: hidden.