Flex Shrink

When flex items are too big for the container element, they auto-shrink down instead of overflowing. It is said that there is 'negative space' outside of the container. When flex-shrink is set to '1', all flex items have an even amount of space removed from them to ensure no overflow. Setting a higher flex-shrink value on a subset of flex-items will increase the amount of space removed from them in order to accommodate the negative space. The amount of negative space will be higher or lower depending on how much the flex items would overflow the container, were they allowed to do so.

Flex-shrink does nothing if flex-wrap is not set to 'nowrap' because items wrap onto new lines instead of overflowing the flex line or shrinking to fit.