flex-shrink

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line's negative free space is distributed between the line's flex items that have a flex-shrink value greater than 0.

Note: It is recommended to use the flex shorthand instead of separate flex-shrink, flex-grow and flex-basis declarations. We have separated them here as this document covers one of the flex shorthand components: the flex-shrink property.

Try it

Syntax

css
/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: revert;
flex-shrink: revert-layer;
flex-shrink: unset;

Description

The flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

This property deals with situations where the browser calculates the flex-basis values of the flex items, and finds that they are too large to fit into the flex container. As long as flex-shrink has a positive value the items will shrink in order that they do not overflow the container.

The flex-grow property deals with distributing available positive free space proportional to each item's flex grow factor, with the value of the flex-grow property as the only consideration. The flex-shrink property manages removing negative free space to make boxes fit into their container without overflowing. Removing space is a bit more complicated than adding space. The flex shrink factor is multiplied by the flex base size; this distributes negative space in proportion to how much the item can shrink. This prevents smaller items from shrinking to 0px before a larger item is noticeably reduced.

Generally, flex-shrink is used alongside the flex-grow and flex-basis properties. Within the flex shorthand, the shrink factor is always the second <number>. If the shorthand only includes one number value, that value is assumed to be the flex-grow value.

Values

The flex-shrink property is specified as a single <number>.

<number>

See <number>. Negative values are invalid. Defaults to 1.

Formal definition

Initial value1
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Computed valueas specified
Animation typea number

Formal syntax

flex-shrink = 
<number [0,∞]>

Examples

Setting flex item shrink factor

This example demonstrates how negative free space is distributed based on the item's shrink factor. It includes five flex items with a flex-shrink value greater than 0, which have a combined width greater than their parent flex container's width.

HTML

html
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box4" style="background-color:lightsalmon;">D</div>
  <div class="box5" style="background-color:lightgreen;">E</div>
</div>

CSS

We give each flex item a width of 200px. As the flex-basis property defaults to auto, each item's flex-basis is 200px. This gives the flex items a total width of 1000px, twice the size of the container. We set all flex items to be shrinkable, with flex-shrink values greater than 0. The last two items have greater flex-shrink values set so they will shrink more.

css
#content {
  display: flex;
  width: 500px;
}

#content div {
  width: 200px;
}

.box {
  flex-shrink: 1;
}

.box4 {
  flex-shrink: 1.5;
}

.box5 {
  flex-shrink: 2;
}

Result

The flex items don't overflow their container because they are able to shrink: the 500px of negative free space is distributed among the five items based on their flex-shrink values. The first three items have flex-shrink: 1 set. D has flex-shrink: 1.5 and E has flex-shrink: 2 set. The final width of D and E is less than the others, with E smaller than D.

Specifications

Specification
CSS Flexible Box Layout Module Level 1
# flex-shrink-property

Browser compatibility

BCD tables only load in the browser

See also