Чем отличаются свойства flex-grow и flex-shrink при работе с flex контейнерами?

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

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

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

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

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