fit-content y stretch: los dos valores compuestos

min-content y max-content son medidas puras y por eso rara vez son la respuesta directa: una desborda y la otra estrangula. Los dos valores que usarás de verdad son compuestos. fit-content combina las dos medidas intrínsecas con el espacio disponible en una sola fórmula, y stretch resuelve el problema de rellenar el contenedor que 100% nunca resolvió del todo.

fit-content es una fórmula, no una medida

fit-content no mide nada nuevo: combina lo que ya tienes. Su definición formal es exactamente esta:

fit-content = min( max-content, max( min-content, stretch ) )

Léelo de dentro afuera. max(min-content, stretch) significa “coge todo el espacio disponible, pero nunca bajes del mínimo del contenido”. El min(max-content, ...) de fuera significa “y nunca subas por encima de lo que el contenido necesita”. El resultado es la caja que se ajusta al contenido cuando cabe y se comporta como un bloque normal cuando no cabe.

Tres escenarios ilustran los tres tramos de la fórmula:

Si el contenido es corto y el contenedor ancho, gana max-content: la caja se encoge hasta el texto. Si el contenido es largo y el contenedor estrecho, gana stretch: la caja rellena el contenedor y el texto se parte. Si el contenedor es más estrecho que la palabra más larga, gana min-content: la caja desborda lo mínimo imprescindible en vez de partir la palabra.

/* Un aviso que ocupa lo que ocupa su texto, sin pasarse del contenedor */
.aviso {
  inline-size: fit-content;
  padding: 0.75rem 1rem;
  background: #f9e2af;
  color: #11111b;
}

Este es el valor que quieres casi siempre que pienses “que ocupe lo que necesite”. Es lo mismo que hacía el ajuste al contenido de los flotantes, pero sin flotar nada.

La función fit-content() es otra cosa

Hay una trampa de nomenclatura que cuesta tiempo. Además de la palabra clave, existe la función fit-content(longitud), que solo tiene sentido como tamaño de pista en grid. Su significado es distinto: pone un tope al crecimiento de la pista.

/* La pista crece con el contenido hasta un máximo de 30rem */
.tabla {
  display: grid;
  grid-template-columns: fit-content(30rem) 1fr;
}

Formalmente, fit-content(L) equivale a minmax(auto, max-content) recortado por L: la pista mide lo que el contenido pida, pero nunca más de L. La palabra clave sin argumento, en cambio, usa el espacio disponible como tope. Son parientes, no sinónimos, y usar una donde toca la otra da errores de sintaxis o resultados desconcertantes.

stretch frente al eterno 100%

inline-size: 100% tiene un problema conocido: el porcentaje se resuelve contra el ancho de contenido del bloque contenedor, y luego los márgenes del hijo se suman por fuera. Si el hijo tiene márgenes laterales, desborda.

/* Desborda su padre en 2rem */
.hijo { inline-size: 100%; margin-inline: 1rem; }

Durante años esto se parcheaba con box-sizing —que no ayuda, porque box-sizing afecta a bordes y rellenos, no a márgenes— o con calc(100% - 2rem), que obliga a repetir el margen en dos sitios y se desincroniza en la primera refactorización.

El valor stretch resuelve el caso correctamente: significa “ocupa todo el espacio disponible en el bloque contenedor después de restar tus propios márgenes”. Es el mismo tamaño que tendría la caja con inline-size: auto en flujo normal, pero disponible como valor explícito para usarlo donde auto significaría otra cosa.

/* Ocupa el ancho del padre menos sus propios márgenes. No desborda. */
.hijo { inline-size: stretch; margin-inline: 1rem; }

Este valor tuvo una historia larga bajo prefijos: -webkit-fill-available y -moz-available hacían aproximadamente lo mismo con diferencias sutiles. La versión estandarizada, stretch, llegó a los motores durante 2025 y 2026. Es el más reciente de los cinco valores de esta lección y el único para el que todavía tiene sentido escribir un respaldo:

.hijo {
  inline-size: -webkit-fill-available;  /* motores antiguos */
  inline-size: stretch;                 /* estándar, gana si se entiende */
  margin-inline: 1rem;
}

La cascada hace el trabajo: un motor que no reconoce stretch descarta la segunda declaración y se queda con la primera.

Los cinco valores, elegidos

Con esto tienes el catálogo completo del dimensionado intrínseco y extrínseco. La decisión se toma con una pregunta por valor.

min-content cuando quieres el ancho más estrecho posible: una columna de etiquetas, una barra de iconos, una celda que no debe crecer.

max-content cuando el contenido no debe partirse nunca: una pastilla, una fecha, un botón corto, un encabezado de tabla.

fit-content cuando quieres lo natural: que se ajuste al contenido si cabe y se comporte como un bloque si no cabe. Es el valor por defecto razonable para casi todo componente de tamaño variable.

stretch cuando quieres rellenar el contenedor y hay márgenes de por medio, o cuando estás en el eje de bloque.

Un número o un porcentaje cuando el tamaño es una decisión de diseño y no una consecuencia del contenido. Y ahí lo correcto casi siempre es combinarlos con topes intrínsecos:

/* Una columna de texto legible que nunca se estrangula */
.articulo {
  inline-size: min(65ch, 100%);
  margin-inline: auto;
}