<div id="container">
<div class="item">flex-shrink: 1</div>
<div class="item">flex-shrink: 5</div>
<div class="item">flex-shrink: 3</div>
</div>
#container {
display: flex;
background-color: orange;
}
.item {
background-color: dodgerblue;
color: white;
flex-basis: 200px;
flex-grow: 1;
}
.item:nth-child(1){
flex-shrink: 1;
}
.item:nth-child(2){
flex-shrink: 5;
}
.item:nth-child(3){
flex-shrink: 2;
}
div {
border: 2px solid black;
padding: 10px;
margin-right: 5px;
box-sizing: border-box;
}
This Pen doesn't use any external CSS resources.