Как работают свойства flex-grow и flex-shrink?

flex-grow определяет, насколько сильно элемент может увеличиваться при наличии свободного пространства в контейнере. Значение 0 (по умолчанию) означает, что элемент не будет увеличиваться. Положительные значения указывают коэффициент роста относительно других flex-элементов в том же ряду.

flex-shrink определяет, насколько сильно элемент может сжиматься при недостатке свободного пространства в контейнере. Значение 1 (по умолчанию) означает, что элемент может сжиматься. Значение 0 запрещает сжатие. Положительные значения указывают коэффициент сжатия относительно других flex-элементов.

Рассмотрим пример:

html

css

В данном случае общий базовый размер элементов составляет 300px (3 * 100px). Свободное пространство равн