CSS flex-shrink Property

CSS flex-shrink property specifies how much a flex item should shrink compared to the other items if enough space is not available.

By default, the flex-shrink property is set to 1. which means that all the flex items will shrink equally if enough space is not available.

In the example below, the second flex item has flex-shrink:3; . This means that this item will shrink 3 times faster than the other flex items if enough space is not available.

Example:

#item2{
  flex-shrink: 3;
}

If the flex-shrink property is set to 0 for any flex item, it will not shrink even if enough space is not available. Therefore, a horizontal scroll bar will be added to the webpage.

In the example below, the second flex item is set to flex-shrink:0;. Therefore, it will not shrink. Only the first and third items will shrink if there is no enough space.

Example:

#item2{
  flex-shrink: 0; 
}

As the flex-shrink property is relative in nature. So, if you set the same non-zero value of the flex-shrink property for all the flex items, all these items will shrink equally if enough space is not available. See the example below:

Example:

#item1{
  flex-shrink: 5;
}
#item2{
  flex-shrink: 5;
}
#item3{
  flex-shrink: 5;
}

CSS Syntax

The flex-shrink property has the following syntax:

flex-shrink: number|initial|inherit;

Property Values

The flex-shrink property accepts the following values:

General Info