Como funcionam as propriedades flex-grow e…

flex-grow e flex-shrink controlam como os elementos flex distribuem o espaço livre dentro do contêiner flex.

flex-grow:

Determina qual a parte do espaço livre disponível no contêiner flex será ocupada pelo elemento, se houver espaço livre.
Por padrão flex-grow: 0, o que significa que o elemento não cresce.
Valor - número não negativo.
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.

flex-shrink:

Determina quanto o elemento será comprimido se o espaço disponível no contêiner flex for menor que a soma dos tamanhos base de todos os elementos flex.
Por padrão flex-shrink: 1, o que significa que o elemento pode ser comprimido.
Valor - número não negativo.
Quanto maior o valor de flex-shrink, mais o elemento será comprimido em comparação com outros elementos com valor menor.
Ao comprimir, considera-se a largura base do elemento (flex-basis ou width).

Exemplo:

.conteiner {
  display: flex;
  width: 500px;
  /* Largura total do contêiner */
}

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

.item:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Valores padrão */
}

.item:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Não encolhe */
}

.item:nth-child(3) {
  flex-grow: 0; /* Não cresce */
  flex-shrink: 2; /* Encolhe mais forte */
}

Se a soma das larguras base (300px) for menor que a largura do contêiner (500px), o espaço restante (200px) será distribuído entre o primeiro e o segundo elemento na proporção flex-grow 1:2.

Se a soma das larguras base for maior que a largura do contêiner, os elementos serão comprimidos de acordo com seus valores de flex-shrink e seus tamanhos base. O elemento com flex-shrink: 0 não será comprimido.

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