How do flex-grow: 1 and flex-shrink: 1 set at the same time work? Don't they contradict each other?

Question

css

Sometimes in the code I saw this:

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

How do they work together? I wrote an example on jsfiddle, but I can't understand the logic there.
Don't these properties contradict each other? flex-grow increases the width (relative to other elements within the flex container, making the element "greedy"), and flex-shrink decreases it (making the element "generous").

Answer 1

flex-grow sets the behavior of child elements when the width of the container is greater than the total width of the children, roughly speaking how they will occupy the space that has appeared
flex-shrink sets the behavior when the width of the container is less than the total width of the child elements, roughly speaking how the children will behave elements, when there is not enough space for everyone, who will shrink how