Свойство flex-grow в Flexbox устанавливает изменение одного элемента внутри контейнера по отношению к остальным. 1 Оно упрощает разработку адаптивных макетов, например, работу flex-grow можно увидеть при отображении таблиц в десктопной и мобильной версиях сайтов. 1

Некоторые особенности работы свойства:

• Работает только при наличии свободного места, иначе контейнер не позволит менять размер элемента. 1
• Чтобы установить размер элемента, нужно задать числовое значение, которое укажет масштаб изменения относительно других элементов. 1
• При одинаковом значении элементы поделят свободное пространство поровну. 1
• Элемент с большим значением займёт больше места, а элементы с меньшим значением — меньше. 1

Пример: есть три элемента с flex-grow-значениями 1, 2 и 1. 1 Элемент 2 займёт в два раза больше свободного пространства, чем другие. 1

По умолчанию значение flex-grow равно 0, что означает, что блокам запрещено увеличиваться в размерах. 3