Tamaños intrínsecos

El tamaño intrínseco es el que pide el propio contenido, frente al extrínseco, que impone el contenedor. Estos valores deciden cuánto ocupa cada caja dentro de cualquier layout.

min-content: el ancho más estrecho posible sin desbordar, partiendo el texto en cada oportunidad.
max-content: el ancho que necesita el contenido sin partirse en líneas, aunque desborde.
fit-content: usa max-content mientras quepa y se ajusta al espacio disponible cuando no.
min-width y max-width: fijan límites al tamaño. En flex y grid, el mínimo automático de los ítems es min-content, por eso a veces no se encogen.
aspect-ratio: mantiene la proporción de una caja, por ejemplo 16 / 9, aunque cambie su ancho.

Ejemplo

Cambia el width del hijo con la clase item y reduce el ancho del contenedor: max-content desborda, min-content parte el texto todo lo posible y fit-content se adapta entre ambos.

Selecciona width:

automin-contentmax-contentfit-content

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="item">A box with some longer text inside it</div>
</div>

<div class="container">
  <div class="item">A box with some longer text inside it</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.item {
  background: #d9d2f5;
  padding: 1rem;
  width: auto;
}

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.item {
  background: #d9d2f5;
  padding: 1rem;
  width: auto;
}

Edita el código o usa los selectores: el resultado cambia al instante.