You've been sizing elements the wrong way. And CSS has had the fix for years.

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: 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 */}

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.

.container { width: 300px; }.filho {  width: max-content;  /* texto longo = overflow */}

.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 */}

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 */}

Where each one fits

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.