Flex-shrink :0

In this article, we will see what happens if we set CSS flex-shrink property to 0 for flex items. Flex shrink defines the ability for flex items to shrink if necessary. The default value of flex-shrink is 1. However, the flex shrink factor again is still relative to the other items in the container. So, let’s understand with examples.

Example:
HTML:

<div id="container">
   <div class="item item-1">Item 1</div>
   <div class="item item-2">Item 2</div>
   <div class="item item-3">Item 3</div>
   <div class="item item-4">Item 4</div>
   <div class="item item-5">Item 5</div>
</div>

CSS:

#container{
  border: 2px black solid;
display: flex; }

.item{
   width: 50px;
   padding: 1px;}
   
.item-1{
   background-color: red; }
   
.item-2{
   background-color: green; }
   
.item-3{
   background-color: orange; }
   
.item-4{
   background-color: darkviolet; }
   
.item-5{
   background-color: yellow; }

Output:

Steps:

1. Here, we have created a parent <div> flex container and inside it we have created 5 flex items. So, see the output of the flex items displayed inside the flex container.
2. 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 is why, If I try to reduce the width of the parent container the flex items shrink to fit inside the container like in the below picture.
3. The shrinking is possible only up to a certain point after which the items simply overflow as in the below picture.
4. If you don’t want shrinking happening on the flex items, you can simply set the flex-shrink property to value 0. After done correctly, the flex items won’t be shrinking

   .item{ 
     flex-shrink: 0;
    }