flex-shrink

Last Updated: August 27, 2022

This defines how much your flex item (child element) shrinks when there is not enough space to grow inside the container.

In the following example, we have set flex-shrink:0 for all the child elements and you can see that item 3 grows to the outside of the container.

flex-shrink:0 overflow in 3rd element

1
2
3

flex-shrink:1

1
2
3

First element has been shirked to fit the container.

Test