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>