CSS flex-shrink Property

The flex-shrink property specifies how much the item shrinks in comparison to other items in the container. It defines an element's ability to shrink in comparison to other elements placed inside the same container.

Note: that if the item in the container is not flexible, the flex-shrink property will have no effect on it.




Property Values

Value Description
number A number indicating how much the item will shrink in comparison to the other flexible items. The default value is 1.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Element Chrome Firefox Safari Edge / IE Opera
flex-shrink 29.0
21.0 -webkit-
18.0 -moz-
6.1 -webkit-
11.0 17.0