Nota: "ancho" en este texto se refiere al "ancho lógico", no al width de CSS; es decir, los valores también son válidos para la height de CSS, si la dirección del idioma es vertical (como los idiomas de Asia oriental) o en flexbox o grid. min-content y max-content son valores válidos para width , height , min-width , min-height , max-width , max-height e incluso más propiedades (como flex-basis ).

¿Cuáles son las dimensiones intrínsecas de una caja?

El nivel 3 de dimensionamiento de CSS introdujo el concepto de dimensiones intrínsecas , lo contrario de extrínseco . Una dimensión extrínseca de una caja se calcula en la caja principal de la caja. Por ejemplo width: 80% se dice que es una dimensión extrínseca ya que el width del sujeto depende del width de la caja que lo contiene.

Por el contrario, width: min-content se dice intrínseco , ya que el ancho de la caja se calcula sobre la dimensión del contenido que contiene la caja.

Las dimensiones intrínsecas son propiedades del propio cuadro, las dimensiones extrínsecas solo están disponibles si el cuadro se coloca en el documento y en un contexto que permita calcular estos valores. Por ejemplo, en CSS-flow (el modo de diseño CSS clásico), como probablemente sepa, height: 20% solo tiene efecto si la height se define en el elemento principal (es decir, es heredable); ese es un caso de una dimensión extrínseca que no es calculable (cuando un valor extrínseco no está disponible, CSS recurre a su equivalente intrínseco). En cambio height: min-content siempre es calculable, ya que es intrínseco al cuadro en sí, y siempre es el mismo independientemente de la ubicación del cuadro (o la ausencia del cuadro) en el documento.

La definición de min-content max-content ha cambiado muchas veces a lo largo de los años, pero el resultado siempre fue el mismo y es bastante sencillo de comprender. Originalmente, la comunidad los solicitó como palabras clave para width , cuyo valor calculado coincidiría con el ancho de un cuadro cuando el cuadro está float . Y, de hecho, la definición de estas dos propiedades se basó originalmente en el comportamiento de float ; ahora se definen más genéricamente de la siguiente manera:

min-content

https://www.w3.org/TR/css-sizing-3/#min-content

El tamaño más pequeño que puede tomar una caja que no provoque un desbordamiento que podría evitarse eligiendo un tamaño más grande.

En otras palabras, el ancho más pequeño de una caja donde el contenido de la caja no desborda la caja misma .

Una buena forma de visualizar esto es usando, de hecho, float .

 /* the computed width of #red in this example equals to specifying #red { width: min-content } */ #blue { width: 0px; } #blue > #red { float: left; }

(GIF fuente: http://jsfiddle.net/6srop4zu/ )

En el GIF anterior, el ancho de contenido mínimo del cuadro rojo es igual al ancho del cuadro rojo en el momento en que el ancho del cuadro azul es 0px (234px en el GIF, puede ser diferente en jsfiddle).

Como puede ver, si el recuadro rojo se hiciera más pequeño, la palabra supercalifragilisticexpialidocious rebosaría el recuadro rojo, por lo tanto, en este caso, el min-content igual al ancho de esa palabra en particular, ya que es la que más espacio ocupa horizontalmente.

max-content

https://www.w3.org/TR/css-sizing-3/#max-content

El tamaño “ideal” de una caja en un eje dado cuando se le da un espacio disponible infinito. Por lo general, este es el tamaño más pequeño que la caja podría tomar en ese eje mientras se ajusta a su contenido, es decir, minimiza el espacio vacío y evita el desbordamiento.

 /* the computed width of #red in this example equals to specifying #red { width: max-content } */ #blue { width: 99999999999999999px; } /* ~infinite */ #blue > #red { float: left; }

(GIF fuente: http://jsfiddle.net/nktsrzvg/ )

En el GIF anterior, el ancho de contenido máximo del cuadro rojo es igual al ancho del cuadro rojo cuando el ancho del cuadro azul es infinito (386 px en el GIF, podría ser diferente en jsfiddle).

Aquí, el cuadro rojo aprovecha al máximo el espacio disponible en el eje x del cuadro azul, pero sin desperdiciarlo. Los contenidos pueden expandirse en el eje relevante sin restricciones, y el cuadro rojo los envuelve y en el punto de máxima expansión.

¿Qué pasa con fit-content , stretch y otros? Estas propiedades están siendo revisadas actualmente y, como tales, no son estables (fecha: julio de 2018). Se agregarán aquí cuando sean un poco más maduros (con suerte pronto).

contenido mínimo:

El ancho mínimo posible que puede tomar un contenido (un grupo de palabras). Significa ancho de la palabra más grande en el contenido.

Ejemplo:

 hi this is biggestWordInTheContent <---- min-content ---->

contenido máximo:

El ancho máximo posible que puede tomar un contenido (un grupo de palabras). Significa el ancho del contenido cuando todas las palabras se organizan juntas en una línea.

Ejemplo:

 hi this is a content without considering any line breaks. <---------------------- max-content ------------------->