Flex-grow.md

Алгоритм расчёта итогового размера с flex-grow

1 шаг. Рассчитываем свободное место во флекс-контейнере:

Свободное место = Ширина контейнера - Сумма базовых размеров элементов

2 шаг. Считаем размер минимальной доли свободного места:

Доля свободного места = Свободное место / Сумма flex-grow всех элементов

3 шаг. Базовый размер каждого флекс-элемента увеличиваем на размер минимальной доли свободного места умноженной на значение flex-grow этого элемента:

Итоговый размер = Базовый размер + (Доля свободного места * flex-grow)

Для верхнего блока хочется задать коэффициенты 1 и 2. Но нужные размеры блоков получаются с коэффициентами 1 и 3. Давайте посчитаем:

Свободное место = 300px - (50px * 2) = 200px
Доля свободного места = 200px / (1 + 3) = 50px
Итоговый размер зелёного = 50px + (50px * 1) = 100px
Итоговый размер коричневого = 50px + (50px * 3) = 200px

Но если задать флекс-элементам нулевой базовый размер, свободное место будет занимать всю ширину флекс-контейнера, и коэффициенты жадности будут другими.

Использовать flex-basis: 0 и flex-grow для точного управления относительными размерами не стоит. Лучше использовать базовый размер в процентах.

Тонкость. На размер оставшегося свободного места влияет не только flex-basis, но и рамки, и отступы. Если flex-basis явно задано нулевое значение, то min-width на размер свободного места влиять не будет, так как ограничения размеров к флекс-элементам применяются уже после перераспределения свободного места.