Чем отличается поведение flex-grow и flex-shrink при изменении размера родительского контейнера?

Flex-grow и flex-shrink отличаются поведением при изменении размера родительского контейнера следующим образом:

• Flex-grow позволяет указать, какую долю свободного пространства во flex-контейнере может занимать элемент, или, другими словами, в какой степени он может «расти» вдоль главной оси. skillbox.ru Если для всех элементов flex-grow установлено значение 1, оставшееся пространство в контейнере будет равномерно распределено между всеми дочерними элементами. habr.com Если один из дочерних элементов имеет значение 2, этот элемент займёт в два раза больше места, чем остальные. habr.com При изменении размеров экрана пропорция между элементами сохранится. skillbox.ru
• Flex-shrink, в противоположность flex-grow, позволяет указать, насколько сильно элемент должен сжиматься, если суммарная ширина элементов превышает размер контейнера. skillbox.ru По умолчанию у всех дочерних элементов устанавливается значение этого свойства 1. skillbox.ru Элементы с ненулевым значением flex-shrink будут сжиматься, насколько это возможно, с учётом значений flex-shrink других элементов. skillbox.ru

Таким образом, flex-grow отвечает за рост элементов, а flex-shrink — за сжатие, в зависимости от ситуации, когда суммарная ширина элементов либо превышает, либо не достаёт до размера контейнера. skillbox.ru stackoverflow.com