Flex-shrink

The flex-shrink property defines how much the item will shrink. It moves together with the other flexible items in the same container.

Let us you remind that if there are no flexible items, flex-shrink property won't have any effect.

Internet Explorer 10 and earlier versions do not support the flex-shrink property.

CSS Syntax

flex-shrink: number | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
     <style> 
        #color-container {
           width: 350px;
           height: 100px;
           padding-left:0;
           list-style-type:none;
           border: 1px solid #cccccc;
           display: -webkit-flex; 
           display: flex;
       }

        #color-container li{
          -webkit-flex-grow: 1; 
          -webkit-flex-shrink: 1; 
          -webkit-flex-basis: 100px; 
           flex-grow: 1;
           flex-shrink: 20;
           flex-basis: 100px;
       }

        #color-container li:nth-of-type(2) {
            -webkit-flex-shrink: 3; 
            flex-shrink: 3;
         }
      </style>
   </head>

   <body>

         <ul id="color-container">
             <li style="background-color:red;"></li>
             <li style="background-color:lightblue;"></li>
             <li style="background-color:orange;"></li>
             <li style="background-color:purple;"></li>
             <li style="background-color:lightgreen;"></li>
         </ul>

   </body>
</html>

Here is the result:



Property Values

Value Descriptions
number It defines that how much the item will shrink. We give a number to define it. The default number is 1.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.