CSS Layout
Intrinsic Sizing
Use min-content, max-content, fit-content(), and flexible track sizing to let content participate in layout decisions. It covers min-content, max-content, fit-content(), minmax(), flexible Grid tracks, and content-driven layouts that need fewer breakpoints.
Intrinsic sizing lets an element’s content contribute a minimum or preferred size. Extrinsic sizing supplies a size from outside, such as a fixed length or the available width of a containing block.
Content has layout information: a button has an unbroken label, a paragraph has a comfortable wrapping width, and an image has natural dimensions. Intrinsic keywords expose that information to Grid and ordinary sizing. They are especially helpful when a component should change according to its contents rather than a guessed device category. This topic also connects with CSS Width and Height and CSS Grid Columns.
Content has natural size contributions
min-content is roughly the smallest size content can take without avoidable overflow. max-content is the size it would prefer without wrapping. These values are especially useful in Grid.
Example
css
.toolbar {
display: grid;
grid-template-columns: max-content minmax(0, 1fr) max-content;
gap: 0.75rem;
}
.popover {
width: fit-content(28rem);
}Flexible tracks still need limits
minmax(0, 1fr) permits a track to shrink below its content-based automatic minimum. Use it when long content pushes a grid beyond its container.
Example
css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}Animating intrinsic sizes
interpolate-size: allow-keywords opts into transitions between a length and an intrinsic keyword such as auto or max-content. Support is still limited, so keep the expanded and collapsed states usable without interpolation.
Example
css
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
.details {
block-size: 0;
overflow: clip;
transition: block-size 250ms ease;
}
.details[open] { block-size: auto; }
}Intrinsic Sizing Values
| Value or function | Meaning | Example |
|---|---|---|
| min-content | Smallest size the content can take without avoidable overflow. | width: min-content |
| max-content | Preferred size without soft wrapping. | width: max-content |
| fit-content() | Clamps an available size between intrinsic limits. | width: fit-content(30rem) |
| auto | Lets the layout algorithm choose the used size. | inline-size: auto |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Intrinsic Sizing example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.toolbar {
display: grid;
grid-template-columns: max-content minmax(0, 1fr) max-content;
gap: 0.75rem;
}
.popover {
width: fit-content(28rem);
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
.details {
block-size: 0;
overflow: clip;
transition: block-size 250ms ease;
}
.details[open] { block-size: auto; }
}
</style>
</head>
<body>
<main><div class="toolbar"><strong>Brand</strong><input aria-label="Search"><button>Search</button></div><p class="popover">This box stops growing at a readable width.</p><section class="gallery"><article>Short</article><article>Longer card content</article><article>Third card</article></section></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| width: min-content | 46 | 79 | 66 | 11 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Intrinsic sizing reduces breakpoint count because the content-not a guessed device width-determines when the layout changes.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Intrinsic sizing lets content participate in layout and often removes the need for guessed breakpoints.
Combine intrinsic contributions with explicit safety limits. Patterns such as minmax(0, 1fr) and min(100%, 18rem) allow content to participate without forcing overflow. Always test the pattern with unusually long and unusually short values.