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

flex-grow y flex-shrink determinan cómo los elementos ajustan su tamaño de manera adaptable dentro del contenedor flex, cuando hay espacio libre o insuficiente, respectivamente.

flex-grow - determina el coeficiente por el cual un elemento debe aumentar cuando hay espacio libre en el contenedor. El valor predeterminado es 0 (el elemento no se estira). 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.

.item {
  flex-grow: 1; /* El elemento usará todo el espacio libre disponible */
}

flex-shrink - determina el coeficiente por el cual un elemento debe comprimirse cuando hay espacio insuficiente en el contenedor. El valor predeterminado es 1 (el elemento se comprime en proporción a otros elementos que también se comprimen). Un valor de 0 evita que el elemento se comprima.

.item {
  flex-shrink: 0; /* El elemento no se comprimirá */
}

Junto con flex-basis, forman la propiedad abreviada flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Ejemplo de uso:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

.container {
  display: flex;
  width: 400px; /* Ejemplo de ancho fijo del contenedor */
}

.item {
  flex-basis: 100px; /* Tamaño base de todos los elementos */
}

.item-1 {
  flex-grow: 1; /* Item 1 usará el espacio libre */
}

.item-2 {
  flex-shrink: 0; /* Item 2 no se comprimirá */
}

Si el contenedor es más ancho que 200px (100px + 100px), item-1 ocupará todo el espacio libre restante. Si el contenedor ya mide 200px, item-2 mantendrá su tamaño base de 100px, y item-1 se comprimirá.