Как flex-grow влияет на распределение свободного пространства в flex контейнере?

Flex-grow определяет, как элементы распределяют свободное пространство внутри flex-контейнера. css-live.ru Свободным пространством считается разница между размером контейнера и размером всех элементов внутри. ru.hexlet.io

При одинаковом значении flex-grow элементы делят свободное пространство поровну. practicum.yandex.ru Элемент с большим значением flex-grow займёт больше места, а элементы с меньшим значением — меньше. practicum.yandex.ru

Некоторые примеры влияния flex-grow на распределение пространства:

• flex-grow: 1 — один элемент займёт всю доступную ширину контейнера; bureau.ru
• flex-grow: 1 и flex-grow: 1 — два элемента поделят контейнер пополам; bureau.ru
• flex-grow: 2 и flex-grow: 1 — два элемента поделят контейнер в соотношении 2:1. bureau.ru

Важно, что flex-grow только добавляет к ширине элемента, но не отбирает. ru.hexlet.io Если свободного пространства внутри контейнера нет, то свойство flex-grow не будет иметь видимых эффектов. ru.hexlet.io