FrontendFrontend · 11 Jun 2026
You've been sizing elements the wrong way. And CSS has had the fix for years.
You set width: 200px. It works... until it becomes min-width, max-width and some unreadable calc(). What if the content called the ideal size?
The classic problem: you have a button. The button text changes depending on context — sometimes it's "Save", sometimes it's "Save and continue editing". You define width: 200px. It works... until it doesn't. Then it becomes min-width, then max-width, then some calc() that nobody can read anymore.
There's a different approach. Instead of you deciding the element's size, you let the content decide. That's exactly what CSS intrinsic sizing values do.
Two ways to think about size in CSS
Before diving into the three values, it's worth understanding the distinction that documents them:
Extrinsic sizing is when you impose a size on the element — width: 300px, width: 50%. You decide, the element obeys.
Intrinsic sizing is when the size emerges from the content. The element tells you its ideal size, and CSS respects that. min-content, max-content and fit-content are intrinsic values.
min-content
min-content
The smallest possible size without causing overflow. For text, it's equivalent to the longest word.
max-content
max-content
The ideal size if space were infinite. No line breaks, no compression.
fit-content
fit-content
The smart middle ground: grows up to max-content, shrinks down to available space.
min-content: the smallest size that doesn't break anything
With min-content, the element shrinks to its minimum viable limit. For a text block, that limit is the longest word — CSS will break lines at every space until only the term that can't be split remains.
.card {
width: min-content;
}
/* O card vai ter a largura exata da sua palavra ou imagem mais larga */The most elegant use case is the classic <figure> with caption. Without anything, the figure element is a block and takes up 100% of the container. With min-content, it hugs the image — and the caption obeys the same limit.
figure {
width: min-content;
}
figcaption {
font-size: 0.85rem;
color: #666;
/* Segue automaticamente a largura da imagem */
}In Grid and Flexbox: min-content works as a value for flex-basis and in the grid-template-columns functions. You can define a column that will never be smaller than its content demands.
max-content: infinite space, real size
max-content is the answer to the question: "what would be the ideal size of this element if space weren't an issue?" CSS calculates the size as if unlimited space were available — no forced line breaks, no compression.
.tooltip {
width: max-content;
/* Expande até caber todo o texto numa linha */
}
.nav-item {
width: max-content;
/* Cada item ocupa exatamente o espaço do seu label */
}The important warning: if the content is wider than the parent container, you'll get overflow. max-content isn't responsive by nature — it's precise.
✕ Overflow happens
.container { width: 300px; }
.filho {
width: max-content;
/* texto longo = overflow */
}✓ Correct usage
.badge {
width: max-content;
/* conteúdo curto e previsível */
white-space: nowrap;
}fit-content: the smartest of the three
fit-content combines the previous two in an adaptive way. The behavior is: grows up to the max-content, but never more than the available space — and never smaller than the min-content.
.button {
width: fit-content;
/* Abraça o texto — sem padding excessivo, sem overflow */
}
.card-titulo {
width: fit-content;
/* Ocupa só o que o título precisa */
}There's also the function version, fit-content(valor), which adds an explicit maximum cap:
.coluna-sidebar {
width: fit-content(300px);
/* Cresce com o conteúdo, mas nunca passa de 300px */
}Classic use case: centered navigation. A <nav> with width: fit-content + margin: auto centers automatically without needing flexbox or an extra container.
How to use in Grid and Flexbox contexts
Intrinsic values gain even more power inside Grid and Flexbox, because they directly control the behavior of tracks and items:
/* Grid: coluna que abraça o conteúdo, outra que preenche o resto */
.layout {
display: grid;
grid-template-columns: max-content 1fr;
/* sidebar com largura exata do conteúdo | main área que cresce */
}
/* Flexbox: item que não encolhe além do seu conteúdo mínimo */
.flex-item {
flex-basis: min-content;
flex-grow: 1;
}/* minmax com conteúdo intrínseco — colunas que nunca ficam pequenas demais */
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
gap: 1rem;
}Animating between intrinsic values
For a long time, animating from height: 0 to height: auto was impossible in CSS. Animations for sizing values like min-content and fit-content didn't work either.
Chrome 129 changed that with interpolate-size:
/* Ativa animações pra valores intrínsecos no documento inteiro */
:root {
interpolate-size: allow-keywords;
}
.accordion-content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.accordion-content.open {
height: fit-content;
/* Agora anima suavemente — sem JavaScript */
}Current support: interpolate-size is available in Chrome 129+ and Edge. Firefox and Safari still don't support it. For production use, apply as progressive enhancement with functional fallback.
Where each one fits
Value | Behavior | Best use |
|---|---|---|
min-content | Smallest size without overflow | figure + caption, compact grid columns |
max-content | Ideal size with infinite space | tooltips, badges, predictable nav items |
fit-content | Grows up to available space, without exceeding | buttons, headings, centered navigation |
fit-content(x) | fit-content with explicit ceiling | sidebars, columns with maximum limit |
What to take away from this article
min-content — the element shrinks down to the widest word or image. Useful for hugging content without forcing a fixed width.
max-content — the element expands as if it had infinite space. Precise, but can cause overflow if not used carefully.
fit-content — the most versatile. Grows with content, respects the container, doesn't exceed max-content
fit-content(x) — same as above, but with a ceiling. Great for layouts with maximum width restrictions.
interpolate-size — 2024 newcomer. Allows animating to intrinsic values in Chrome 129+. Keep an eye on support.
All three work in width, height, flex-basis, and Grid tracks.
Media query isn't wrong. Pixels aren't either. The problem is when they become the only tool available — and you start solving in JavaScript a problem CSS already solved.
Intrinsic sizing doesn't replace everything. But it eliminates a good chunk of manual work calculating widths that, in the end, the browser would calculate better on its own.
Interactive quiz