flex-shrink

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line’s negative free space is distributed between the line’s flex items that have a flex-shrink value greater than 0.

Note: It is recommended to use the flex shorthand with a keyword value like auto or initial instead of setting flex-shrink on its own. The keyword values expand to reliable combinations of flex-grow, flex-shrink, and flex-basis, which help to achieve the commonly desired flex behaviors.

Syntax example: flex-shrink: 2;