In this section, we will learn what the flex-shrink property is and how to use it in CSS.
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
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
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:
As you can see, there’s no overflow anymore.