Flex-shrink

The flex-shrink property

While flex-grow distributes the available space in a Flexbox container to grow flex-items, flex-shrink takes away from the basis of Flex components when there is not enough space for them.

Similar to flex-grow, items can also shrink proportionally with respect to the ratio of their flex-shrink values. The higher the flex-shrink value, the more an element will give up from itself with respect to other items to fit in its Flexbox container.

Shrinking is performed proportionally based on the individual flex-shrink and flex-basis values.

Examples