Flex-shrink does not work

HTML-CSS
1

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>
2

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.

3

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