Как работает свойство flex-grow

Свойство flex-grow определяет, как свободное пространство внутри flex-контейнера распределяется между flex-элементами. Оно принимает безразмерное число (по умолчанию 0), которое указывает долю элемента в доступном пространстве.

Особенности:

• Работает только при наличии свободного места в контейнере
• Если у всех элементов flex-grow: 0 (по умолчанию), свободное место не распределяется
• Значение пропорционально: элемент с flex-grow: 2 получит в 2 раза больше места, чем элемент с flex-grow: 1

.container {
  display: flex;
}
.item1 {
  flex-grow: 1; /* займет 1/3 свободного места */
}
.item2 {
  flex-grow: 2; /* займет 2/3 свободного места */
}

Важно: flex-grow влияет только на распределение оставшегося пространства, а не на исходные размеры элементов.