¿Cómo se calculan los valores min-contenty max-contenten CSS?

¿Y qué significa dimensión intrínseca?

Nota: "ancho" en este texto se refiere al "ancho lógico", no a CSS width; es decir, los valores también son válidos para CSS height, si la dirección del lenguaje es vertical (como idiomas del este de Asia) o en flexbox o grid. min-contenty max-contentson valores válidos para width, height, min-width, min-height, max-width, max-heighte 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ínsecas . La dimensión extrínseca de una caja se calcula en la caja principal de la caja. Por ejemplo, width: 80%se dice que una dimensión extrínseca ya que la widthdel sujeto depende de la widthde su caja contenedora.

Contrariamente a eso, width: min-contentse dice intrínseco ya que el ancho de la caja se calcula sobre la dimensión del contenido que contiene la propia caja.

Las dimensiones intrínsecas son propiedades de la caja en sí, las dimensiones extrínsecas solo están disponibles si la caja 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 heightestá definido en el elemento padre (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-contentsiempre 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-contenty max-contentha cambiado muchas veces a lo largo de los años, pero el resultado siempre ha sido 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 una caja cuando la caja está funcionando 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 conduce a un desbordamiento que se podría evitar 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 desborde la caja en sí .

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

(Fuente GIF: 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, podría ser diferente en el jsfiddle).

Como puede ver, si el cuadro rojo se hiciera más pequeño, la palabra supercalifragilisticexpialidociousdesbordaría el cuadro rojo, por lo que en este caso min-contentes igual al ancho de esa palabra en particular, ya que es la que ocupa más espacio 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 puede tomar en ese eje mientras aún encaja alrededor de 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; }

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

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

Aquí, el cuadro rojo aprovecha al máximo el espacio disponible en el eje x en el cuadro azul, pero sin desperdiciarlo. Se permite que los contenidos se expandan en el eje relevante sin restricciones, y la caja roja los envuelve y en el punto de máxima expansión.

¿Qué pasa fit-content, stretchy los demás? Estas propiedades se están revisando 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).

Encontré la respuesta de @Wes muy clara y completa. Pero para cualquiera que busque uno breve:

contenido mínimo:

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

ejemplo:

hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

contenido máximo:

el ancho máximo que puede tener un contenido (un grupo de palabras). Significa el ancho del contenido cuando todas las palabras están organizadas juntas en una línea.

ejemplo:

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->