Свойства flex-grow и flex-shrink отличаются тем, за что они отвечают при работе с flex-контейнерами. 14

Flex-grow позволяет указать, какую долю свободного пространства во flex-контейнере может занимать элемент, или, другими словами, в какой степени он может «расти» вдоль главной оси. 4 Некоторые особенности свойства:

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

Flex-shrink, в противоположность flex-grow, позволяет указать, насколько сильно элемент должен сжиматься, если суммарная ширина элементов превышает размер контейнера. 4 Некоторые особенности свойства:

• Полезно в ситуациях, когда контейнер меньше, чем ширина или высота элементов. 1
• Сжимает элементы вслед за контейнером, тем самым исключая переполнение. 1
• При этом с flex-shrink можно не бояться, что элементы нарушат структуру макета при сжатии. 1
• Элемент с большим значением будет уменьшаться сильнее по сравнению с другими. 1