• Post category:CSS

What Happens If You Set the CSS flex-shrink Property to 0?

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:

flex-shrink CSS

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.flex-shrink :0
  3. The shrinking is possible only up to a certain point after which the items simply overflow as in the below picture.flex-shrink :0
  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;
     }

Leave a Reply