什麼是 flex-grow ?
定義了 flex item 在 flex 容器內空間足夠時，接受一個數值，用於計算分配空間的比例，預設值為 0。

<div>
    <div class="block pink"></div>
    <div class="block yellowgreen"></div>
</div>

.block {
  height: 100px;
}

.pink {
  background-color: red;
  flex-grow: 1; /* (1 / (1 + 2)) * 100% = 33.3333% */
}

.yellowgreen {
  background-color: blue;
  flex-grow: 2; /* (2 / (1 + 2)) * 100% = 66.6666% */
}

<div>
    <div class="block pink"></div>
    <div class="block yellowgreen"></div>
    <div class="block yellow"></div>
</div>

.block {
  height: 100px;
}

.pink {
  background-color: red;
  flex-grow: 1; /* (100% - 100px) * (1 / (1 + 2 + 2)) */
}

.yellowgreen {
  background-color: blue;
  flex-grow: 2; /* (100% - 100px) * (2 / 5) */
}

.yellow {
  background-color: yellow;
  flex-grow: 2; /* (100% - 100px) * (2 / 5) */
  width: 100px; 
}