Как функционируют свойства flex-grow и flex-shrink?

flex-grow и flex-shrink управляют тем, как flex-элементы распределяют свободное пространство внутри flex-контейнера.

flex-grow:

• Определяет, какую часть доступного свободного пространства в flex-контейнере займет элемент, если свободное пространство есть.
• По умолчанию flex-grow: 0, что означает, что элемент не увеличивается.
• Значение - неотрицательное число.
• Если у нескольких элементов flex-grow больше 0, свободное пространство распределяется между ними пропорционально их значениям flex-grow.

flex-shrink:

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