¿Cómo funcionan las propiedades flex-grow y…

flex-grow y flex-shrink controlan cómo los elementos flex distribuyen el espacio libre dentro del contenedor flex.

flex-grow:

Determina qué parte del espacio libre disponible en el contenedor flex ocupará el elemento, si hay espacio libre.
Por defecto flex-grow: 0, lo que significa que el elemento no crece.
Valor - número no negativo.
Si varios elementos tienen flex-grow mayor que 0, el espacio libre se distribuye entre ellos en proporción a sus valores de flex-grow.

flex-shrink:

Determina cuánto se comprimirá el elemento si el espacio disponible en el contenedor flex es menor que la suma de los tamaños base de todos los elementos flex.
Por defecto flex-shrink: 1, lo que significa que el elemento puede comprimirse.
Valor - número no negativo.
Cuanto mayor sea el valor de flex-shrink, más se comprimirá el elemento en comparación con otros elementos con menor valor.
Al comprimir, se tiene en cuenta el ancho base del elemento (flex-basis o width).

Ejemplo:

.contenedor {
  display: flex;
  width: 500px;
  /* Ancho total del contenedor */
}

.elemento {
  flex-basis: 100px;
  /* Ancho base de cada elemento */
}

.elemento:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Valores por defecto */
}

.elemento:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* No se comprime */
}

.elemento:nth-child(3) {
  flex-grow: 0; /* No crece */
  flex-shrink: 2; /* Se comprime más fuerte */
}

Si la suma de los anchos base (300px) es menor que el ancho del contenedor (500px), el espacio restante (200px) se distribuirá entre el primer y el segundo elemento en proporción 1:2 según flex-grow.

Si la suma de los anchos base es mayor que el ancho del contenedor, los elementos se comprimirán de acuerdo con sus valores de flex-shrink y sus tamaños base. El elemento con flex-shrink: 0 no se comprimirá.

¿Cómo funcionan las propiedades flex-grow y flex-shrink?