In this section, we will learn what the flex-shrink property is and how to use it in CSS.

Click here to run the example of flex-shrink property.

CSS flex-shrink Property Definition and Usage

By default, the space that a flex-item takes within a flex-container is equal to its width. But there’s a chance that the total width of the entire flex-items within a flex-container overflow the available space that the flex-container provides.

In the picture above, we have a flex-container with the width of 100px. There are 5 items each has a width of 25px and in total they occupied 125px. Now, the total width of flex-items surpassed the boundary of the container by 25px or, in another word, the last flex-item in this container overflowed by 25px.

CSS provided a property named `flex-shrink` by which we can shrink down the total width of flex-items in order to prevent the overflow of flex-items.

CSS flex-shrink Property Syntax

flex-shrink: number|initial|inherit;

CSS flex-shrink Property Value

The value we set for `flex-shrink` property is unit-less non-negative number (negative numbers don’t have any effect).

Note: default value is set to 1.

How Does CSS flex-shrink Property Work?

This is how `flex-shrink` property works:

In our example, let’s say this is how we applied `flex-shrink` property to each flex-item:

Here, the total number set for the flex-shrink property in this container for all items is 9.

What this means is that we’re asking the browser to first divide the overflowed content of the flex-container into 9 equal blocks.

We say 9 equal blocks, because the total number set for `flex-shrink` property in all flex-items in this example is 9. If the total number was 5, then we had 5 equal blocks, and so on.

Note: the value we set for the flex-shrink in each item specifies how many blocks it should lose from its width in order to clear the overflow.

For example, because the first element has `flex-shrink:2` it means the width of this element should shrink down by 2 blocks; the second element has `flex-shrink:1` and it means the width of this element should shrink down by 1 block; the third element has `flex-shrink:2` and it means the width of this element should shrink down by 2 blocks; the fourth element has `flex-shrink:3` and it means the width of this element should shrink down by 3 blocks and the last element has `flex-shrink:1` which means the width of this element should shrink down by 1 block.

Here’s how it looks like:

As the picture above shows, after shrinking down each element, now the total width of flex-items fitted the available space of the container and there’s no overflow anymore.

Example: flex-shrink property in CSS

See the Pen flex-shrink property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

In this example, we didn’t shrink down the flex-items within the container and so the last element overflowed by 25vw.

Now, let’s apply `flex-shrink` in order to prevent the overflow:

See the Pen let’s apply `flex-shrink` by Omid Dehghan (@enjoytutorials1) on CodePen.

As you can see, there’s no overflow anymore.