A propriedade flex-grow é uma propriedade flexbox que permite especificar a alocação de espaço livre para contêineres dentro de um contêiner flexível. Ele fornece uma solução para todo esse espaço indesejado!
Bem, nós adicionamos duas coisas à sintaxe do css.
HTML
```html
<pclass ="ten">1</p>
<pclass ="twenty">2</p>
```
CSS
```css
body {
display:flex;
}
p {
flex-grow: 1;
}
```
Duas coisas aconteceram
1. O contêiner pai foi convertido em um display flexível por `display:flex`
2. O "espaço livre" remanescente foi então alocado entre os p contentores remanescentes em uma razão igual, já que cada um possui uma propriedade flex-grow de 1.
O que acontece se tivermos contêineres p com diferentes propriedades flex-grow?
Vamos ver um exemplo.
Primeiro vamos criar dois parágrafos e ativar a exibição: flex;
* Há algum espaço vazio à direita das duas caixas.
Esse espaço vazio é o "espaço livre" que será alocado para cada um dos diferentes parágrafos posteriormente, dependendo de suas propriedades flex-grow.
Para ver isso em ação, vamos dar ao primeiro uma classe de "dez" e uma propriedade de flex-grow de 1. Vamos também dar ao segundo uma classe de "vinte" e uma propriedade flex-grow de 2.
