flex-shrink property

Specifies the flex shrink factor for the flex item.

This property is read/write.

Syntax

flex-shrink: <number>

Property values

To control how the flex item shrinks relative to other items in the flex container, use the following.

<number>: A positive number that determines the flex shrink factor of the flex item. Negative numbers are invalid.

CSS information

Applies To	flex items
Media	visual
Inherited	no
Initial Value	1

Remarks

As of Microsoft Edge, the "-ms-" prefixed version of this property is not supported.

As of Internet Explorer for Windows Phone 8.1 Update and Microsoft Edge, IE supports "-webkit-flex-shrink" as an alias for this property.

The flex shrink factor is a multiplier that determines how much a flex item shrinks relative to the other items in the flex container.

This property can also be specified within the shorthand flex property.

Examples

In the following example, flex-shrink values are defined for three flex items inside of the flex container.

HTML


<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

The image below shows the above flex container that has been resized smaller than the original size of the flex container. The image shows how each flex item will shrink relative to each other. When flex-shrink is set to a higher value, the flex item will shrink more relative to the other items inside of the flex container. The first flex item has a flex-shrink value of 20. This flex item will shrink more relative to the two other flex items whose values are 5 and 1, the initial value for flex-shrink.

A flex container resized smaller than the original size

CSS


#item1 {
   width: 120px;
   background: #66CC33;
   flex-shrink: 20;
}
#item2 {
   width: 120px;
   background: #0099FF;
   flex-shrink: 5;
}
#item3 {
   width: 120px;
   background: #66CC33;
}