Flex-shrink does not work

I tried flex-shrink with four items - I set flex-shrink value at 2 for box4. I expected box4 to shrink twice more than the others however, box4 just disappeared when I ran the code below. Can somebody tell me what’s wrong with my code?

<!Doctype html>
<html>
<style>
#boxcontainer{
 height: 500px;
 display: flex;
 flex-direction: row;
 background-color: gray;
 
 }
 
#box1{
 background-color: pink;
 width: 100%;
 height: 60%;
 flex-shrink:1;
 }

#box2{
 background-color: red;
 width: 100%;
 height: 60%;
 flex-shrink:1;
 }
 
#box3{
 background-color: yellow;
 width: 100%;
 height: 60%;
 flex-shrink:1;
} 

#box4{
 background-color: green;
 width: 100%;
 height: 60%;
 flex-shrink:2;
} 



</style>
<body>
<div id="boxcontainer">
 <div id="box1"> </div>
 <div id="box2"> </div>
 <div id="box3"> </div>
 <div id="box4"> </div>
 
</div>
</body>
 
</html>

Hi,
flex-shrink is designed to distribute negative free space in the container which means it only works when flex items are big enough to overflow the container.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.