Flex Shrink

On the other side of flex-grow, we also have a Flex Shrink property. As might you have already guess flex-shrink defines the ability for a flex item to shrink if necessary and unlike a flex-grow the default value for flex-shrink is 1.

---

Flex Shrink

The first point to make note of is that flex-shrink is set to a value of 1 by default for every single flex item that’s the reason if we try to reduce the flex container it reduce and shrinks the items inside it.
let’s say you don’t want to allow the shrink the items inside the flex container. for that simply set the flex-shrink value to 0.

...
.flex-item {
  ...
  flex-shrink : 0  /* Default is 1 */
}
...

After this, if you shrink the browser the flex items will overflow right away. otherwise, the item gets shrink of its available space.

Flex Shrink Individual

We can shrink the items individually, what it will do is it will shrink that particular item as per the value assign.
for e.g, if the flex-shrink value is given 4 then it will shrink that particular item 4 times relative to the other items.

...
.item-2 {
  ...
  flex-shrink : 4  /* Default is 1 */
}
...

In the above 2^nd example, you can see the item-3 is more shrunk then the other items.

---

Demo

See the Pen Flex Shrink
by rehmaanali (@geekstrick) on CodePen.