Você está dimensionando elementos do jeito errado. E o CSS já tem a solução há anos.

O problema clássico: você tem um botão. O texto do botão muda dependendo do contexto — às vezes é "Salvar", às vezes é "Salvar e continuar editando". Você define width: 200px. Funciona... até não funcionar. Aí vira min-width, depois max-width, depois um calc() que ninguém mais consegue ler.

Existe uma abordagem diferente. Em vez de você decidir o tamanho do elemento, você deixa o conteúdo decidir. É exatamente isso que os valores intrínsecos de dimensionamento do CSS fazem.

Dois jeitos de pensar tamanho em CSS

Antes de entrar nos três valores, vale entender a distinção que os documenta:

Dimensionamento extrínseco é quando você impõe um tamanho ao elemento — width: 300px, width: 50%. Você decide, o elemento obedece.

Dimensionamento intrínseco é quando o tamanho emerge do conteúdo. O elemento diz qual é o seu tamanho ideal, e o CSS respeita isso. min-content, max-content e fit-content são valores intrínsecos.

min-content: o menor tamanho que não quebra nada

Com min-content, o elemento encolhe até o seu limite mínimo viável. Para um bloco de texto, esse limite é a palavra mais longa — o CSS vai quebrar linha em cada espaço até sobrar apenas o termo que não pode ser dividido.

.card {  width: min-content;}/* O card vai ter a largura exata da sua palavra ou imagem mais larga */

O caso de uso mais elegante é o clássico de <figure> com legenda. Sem nada, o elemento de figura é um bloco e ocupa 100% do container. Com min-content, ele abraça a imagem — e a legenda obedece o mesmo limite.

figure {  width: min-content;}figcaption {  font-size: 0.85rem;  color: #666;  /* Segue automaticamente a largura da imagem */}

max-content: espaço infinito, tamanho real

max-content é a resposta pra pergunta: "qual seria o tamanho ideal desse elemento se o espaço não fosse problema?" O CSS calcula o tamanho como se tivesse espaço ilimitado disponível — sem quebras de linha forçadas, sem compressão.

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

O aviso importante: se o conteúdo for mais largo do que o container pai, vai ter overflow. max-content não é responsivo por natureza — ele é preciso.

.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: o mais inteligente dos três

fit-content combina os dois anteriores de forma adaptativa. O comportamento é: cresce até o max-content, mas nunca mais do que o espaço disponível — e jamais menor do que o 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 */}

Existe também a versão função, fit-content(valor), que adiciona um teto máximo explícito:

.coluna-sidebar {  width: fit-content(300px);  /* Cresce com o conteúdo, mas nunca passa de 300px */}

Como usar nos contextos de Grid e Flexbox

Os valores intrínsecos ganham mais poder ainda dentro de Grid e Flexbox, porque controlam diretamente o comportamento das trilhas e dos itens:

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

Animar entre valores intrínsecos

Por muito tempo, animar de height: 0 pra height: auto era impossível no CSS. Animações pra valores de sizing como min-content e fit-content também não funcionavam.

O Chrome 129 mudou isso com 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 */}

Onde cada um se encaixa