flex-shrink

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.

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

<number>

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

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

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

<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.

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

#content div {
  width: 200px;
}

.box {
  flex-shrink: 1;
}

.box4 {
  flex-shrink: 1.5;
}

.box5 {
  flex-shrink: 2;
}

#content {
  margin: 5px;
}
div {
  font-family: monospace;
  outline: 1px solid;
  line-height: 4em;
  text-align: center;
}

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.

• Basic concepts of flexbox
• Controlling ratios of flex items along the main axis
• CSS flexible box layout module