min-content y max-content: cómo se calculan de verdad

min-content y max-content no son estimaciones ni aproximaciones: son dos números que el motor calcula con un algoritmo definido y que sirven de entrada a casi todo lo demás. La resolución de una pista de grid, el tamaño base de un elemento flex, el ancho de una celda de tabla y el ajuste de un flotante son todos funciones de este par. Entenderlos bien es entender de dónde salen los números que ves en las DevTools.

Las dos medidas

El tamaño max-content de una caja es el ancho que tendría si dispusiera de espacio infinito: todo el contenido en una sola línea, sin ningún salto salvo los que estén escritos explícitamente. Para un párrafo, es la longitud total del texto. Para un contenedor de bloques apilados, es el mayor de los max-content de sus hijos.

El tamaño min-content es el ancho más estrecho posible sin que el contenido desborde: cada oportunidad de salto de línea aprovechada. Para un párrafo de prosa, es la anchura de la palabra más larga. Para un contenedor de bloques, es el mayor de los min-content de sus hijos.

.medida { inline-size: max-content; border: 1px solid; }

<p class="medida">El submarino amarillo</p>

Con max-content, la caja mide lo que ocupa la frase entera en una línea. Con min-content, mide lo que ocupa submarino, la palabra más larga. Los dos números son propiedades del contenido y de la tipografía, y no dependen en absoluto del contenedor.

Cómo se propagan hacia arriba

Lo interesante no es la medida de una caja aislada, sino cómo se combina en un árbol. La especificación define la contribución intrínseca de un hijo: el tamaño que ese hijo aporta al cálculo intrínseco del padre, ya sumados sus márgenes, bordes y rellenos, y ya aplicados sus propios min-inline-size y max-inline-size.

Las reglas de composición dependen del contexto de formato del padre:

La fila de bloques y la de línea explican por sí solas un montón de comportamientos. Un div con tres párrafos tiene el max-content del párrafo más ancho, porque los bloques se apilan y no compiten por el ancho. Un div con tres span tiene el max-content de los tres sumados, porque compiten en la misma línea.

<div class="apilado"><p>Uno</p><p>Dos largo largo</p></div>
<div class="enlinea"><span>Uno</span><span>Dos largo largo</span></div>

.apilado, .enlinea { inline-size: max-content; outline: 1px solid #f38ba8; }

El primero mide lo que mide “Dos largo largo”. El segundo mide “UnoDos largo largo”. Misma propiedad, resultados distintos, y la diferencia está en el contexto de formato, no en el tamaño solicitado.

Qué falsea la medida

Hay tres cosas que rompen la intuición sobre estas medidas, y las tres aparecen en código real constantemente.

La primera es el contenido no partible. Una URL larga sin espacios, una cadena de identificador, un bloque de código con una línea muy larga, una tabla: todos ellos tienen un min-content gigantesco, porque no hay ninguna oportunidad de salto. Cuando ese min-content sube por el árbol, arrastra a sus ancestros y acaba ensanchando la página entera. Es la causa número uno de scroll horizontal accidental.

/* Permite partir palabras solo cuando no queda más remedio */
.contenido { overflow-wrap: break-word; }

/* Para URLs y rutas: parte por cualquier sitio */
.url { word-break: break-all; }

/* Para bloques de código: no partas, haz scroll */
pre { overflow-x: auto; }

overflow-wrap: break-word es la opción correcta por defecto en contenido de usuario: solo actúa cuando una palabra individual no cabe, y no destroza la partición normal.

La segunda es que un porcentaje se comporta como auto durante el cálculo intrínseco. Si un hijo tiene inline-size: 50% y el padre está midiendo su max-content, el padre todavía no tiene ancho, así que el porcentaje no se puede resolver. La especificación dice que en ese caso el porcentaje se trata como auto para el cálculo. Esto produce ciclos aparentes que el motor rompe por regla, y es por lo que un hijo con porcentaje dentro de un padre intrínseco casi nunca hace lo que esperas.

La tercera es que las imágenes con relación de aspecto contribuyen con su tamaño intrínseco real. Una imagen de 4000 píxeles de ancho sin max-inline-size inyecta 4000 píxeles en la cadena de max-content de todos sus ancestros. De ahí que la regla más rentable de cualquier hoja de estilos sea esta:

img, video, svg, canvas { max-inline-size: 100%; block-size: auto; }

Usar min-content a propósito

Más allá de diagnosticar, estas palabras clave resuelven problemas concretos.

Un caso: una barra lateral que debe ser tan estrecha como su contenido permita, sin fijar un número arbitrario.

.disposicion {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 1.5rem;
}

Otro caso: un título que debe partirse de forma equilibrada pero no ocupar más de lo necesario. max-content como ancho y text-wrap: balance para el reparto.

.titular {
  inline-size: min(max-content, 100%);
  text-wrap: balance;
}

La función min() con 100% es el detalle importante: max-content por sí solo desborda alegremente el contenedor si el texto es largo, porque es intrínseco y no mira al padre. Combinarlo con un tope extrínseco es el patrón que hace que el resultado sea seguro.