Dimensiones

Si queremos darle un tamaño específico a los distintos elementos de un documento HTML utilizaremos las propiedades ancho(width) y alto(height). Los valores serán a elección del programador con las medidas normalmente de porcentajes o píxeles. En el caso de darle el valor auto, estamos indicándole al navegador que sea él quien le de el tamaño apropiado dependiendo de su contenido (valor por defecto). Si le damos el valor de max-content usa el tamaño que necesita la caja para representar todo su contenido, si le damos el valor de min-content  la palabra más larga define el tamaño del cuadro y si le damos fix-content el valor será min(max-content, max(min-content, <longitud-porcentaje>)), es decir, hará que el ancho de un elemento se ajuste automáticamente al tamaño de su contenido.

¡OJO! Cuando estamos asignando un alto/ancho a un elemento, ese tamaño no incluye el tamaño que pueda tener su borde o padding, el tamaño total del elemento será la suma de todos ellos. 

Además de estos valores, tenemos la posibilidad de indicarle un máximo/mínimo con las propiedades: min-width, max-width, min-height, max-height. De modo que en lugar de darle un tamaño fijo establecemos unos rangos donde el ancho/alto podría variar entre esos valores. Es importante tener en cuenta que los mínimos(min-width, min-height) por defecto tienen un valor de 0, mientras que los máximos(max-width, max-height) tienen el valor none.

Si por error le damos al ancho(width) o alto(height) un valor superior que su máximo, el tamaño será entre el mínimo y el máximo.

El ancho será entre 0 (valor por defecto) y el 80px.

Ejemplo con fit-content. La caja roja ocupará los 400px del padre, la caja azul será un ancho justo para contener el texto, mientras que la caja verde será para ancha que la azul ya que debe ajustarse a su texto que es mayor.

Con esto podemos decir que la propiedad fit-content es muy útil para crear componentes como etiquetas (tags), botones o tarjetas que necesitan tener un tamaño variable según su texto, y facilita mucho su centrado en la página usando margin: auto;.