flex-shrink

Last Updated: March 29, 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
Test