Что такое Flex-Grow?

`flex-grow` задаёт, какую долю свободного места в flex-контейнере получит элемент.

Пример

.container { display: flex; width: 600px; }
.a { flex-basis: 100px; flex-grow: 1; }
.b { flex-basis: 100px; flex-grow: 2; }
/* свободно 400px: .a получит +133px, .b — +267px */

• Значение по умолчанию — 0: элемент не растёт.
• Делится именно свободное место после flex-basis, а не вся ширина.
• Для равных колонок используют flex: 1 (это flex-grow: 1; flex-shrink: 1; flex-basis: 0).

Связанные свойства

• flex-shrink — как элемент сжимается, если места не хватает.
• flex-basis — стартовый размер до распределения.
• flex: 1 1 200px — краткая запись всех трёх.

Коротко для собеседования

flex-grow — пропорция, в которой элемент забирает свободное место контейнера; по умолчанию 0.

Подробнее: MDN — flex-grow