Como funcionam as propriedades flex-grow e flex-shrink?

flex-grow e flex-shrink determinam como os elementos ajustam o seu tamanho de forma adaptativa dentro do contêiner flex, quando há espaço livre ou insuficiente, respetivamente.

flex-grow - determina o coeficiente pelo qual um elemento deve aumentar quando há espaço livre no contêiner. O valor padrão é 0 (o elemento não se estende). Se vários elementos tiverem flex-grow maior que 0, o espaço livre é distribuído entre eles proporcionalmente aos seus valores de flex-grow.

.item {
  flex-grow: 1; /* O elemento usará todo o espaço livre disponível */
}

flex-shrink - determina o coeficiente pelo qual um elemento deve encolher quando há espaço insuficiente no contêiner. O valor padrão é 1 (o elemento encolhe proporcionalmente aos outros elementos que também encolhem). Um valor de 0 impede que o elemento encolha.

.item {
  flex-shrink: 0; /* O elemento não encolherá */
}

Juntamente com flex-basis, eles formam a propriedade abreviada flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Exemplo 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; /* Exemplo de largura fixa do contêiner */
}

.item {
  flex-basis: 100px; /* Tamanho base de todos os elementos */
}

.item-1 {
  flex-grow: 1; /* O Item 1 usará o espaço livre */
}

.item-2 {
  flex-shrink: 0; /* O Item 2 não encolherá */
}

Se o contêiner for mais largo que 200px (100px + 100px), item-1 ocupará todo o espaço livre restante. Se o contêiner já tiver 200px, item-2 manterá o seu tamanho base de 100px, e item-1 será encolhido.