Как работают одновременно заданные flex-grow: 1 и flex-shrink: 1? Разве они не противоречат друг другу?

Question

[eugene159]

Иногда в коде я видел такое:

flex-grow: 1;
flex-shrink: 1;

Как они работают вместе? Я набросал пример на jsfiddle, но там понять логику не получается.
Разве эти свойства не противоречат друг другу? flex-grow увеличивает ширину (относительно других элементов в пределах flex-контейнера, делая элемент "жадным"), а flex-shrink - уменьшает (делая элемент "щедрым").

Comments

[Lynn «Кофеман»]

Они работают в разное время в зависимости от размера контейнера.

Answer 1

[Pavel Shvedov]

flex-grow задает поведение дочерних элементов, когда ширина контейнера больше, чем общая ширина дочерних элементов, грубо говоря как они будут занимать появившееся пространство
flex-shrink задает поведение, когда ширина контейнера меньше общей ширины дочерних элементов, грубо говоря, как будут вести себя дочерние элементы, когда места на всех не хватает, кто как будет ужиматься

Comments

[eugene159]

Спасибо. Я проверил, это действительно так.
Интересно, что же это за случаи такие, что сначала блок должен быть шире другого. А при уменьшении экрана - уже.