Estás dimensionando elementos de la manera equivocada. Y el CSS ya tiene la solución desde hace años.

El problema clásico: tienes un botón. El texto del botón cambia dependiendo del contexto — a veces es "Guardar", a veces es "Guardar y seguir editando". Defines width: 200px. Funciona... hasta que deja de funcionar. Ahí se vuelve min-width, después max-width, después un calc() que nadie más logra leer.

Existe un enfoque diferente. En vez de que tú decidas el tamaño del elemento, dejas que el contenido decida. Es exactamente eso lo que hacen los valores intrínsecos de dimensionamiento de CSS.

Dos formas de pensar el tamaño en CSS

Antes de entrar en los tres valores, vale entender la distinción que los documenta:

Dimensionamiento extrínseco es cuando impones un tamaño al elemento — width: 300px, width: 50%. Tú decides, el elemento obedece.

Dimensionamiento intrínseco es cuando el tamaño emerge del contenido. El elemento dice cuál es su tamaño ideal, y el CSS respeta eso. min-content, max-content y fit-content son valores intrínsecos.

min-content: el menor tamaño que no rompe nada

Con min-content, el elemento se encoge hasta su límite mínimo viable. Para un bloque de texto, ese límite es la palabra más larga — CSS va a romper la línea en cada espacio hasta que solo quede el término que no puede ser dividido.

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

El caso de uso más elegante es el clásico de <figure> con leyenda. Sin nada, el elemento figure es un bloque y ocupa el 100% del contenedor. Con min-content, abraza la imagen — y la leyenda obedece el mismo límite.

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

max-content: espacio infinito, tamaño real

max-content es la respuesta para la pregunta: "¿cuál sería el tamaño ideal de este elemento si el espacio no fuera problema?" CSS calcula el tamaño como si tuviera espacio ilimitado disponible — sin saltos de línea forzados, sin compresión.

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

El aviso importante: si el contenido es más ancho que el contenedor padre, va a tener overflow. max-content no es responsivo por naturaleza — es 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: el más inteligente de los tres

fit-content combina los dos anteriores de forma adaptativa. El comportamiento es: crece hasta el max-content, pero nunca más que el espacio disponible — y jamás menor que el 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 también la versión función, fit-content(valor), que agrega un techo máximo explícito:

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

Cómo usar en los contextos de Grid y Flexbox

Los valores intrínsecos ganan más poder aún dentro de Grid y Flexbox, porque controlan directamente el comportamiento de las pistas y de los elementos:

/* 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 mucho tiempo, animar de height: 0 a height: auto era imposible en CSS. Animaciones para valores de sizing como min-content y fit-content tampoco funcionaban.

Chrome 129 cambió esto con 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 */}

Dónde encaja cada uno