<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
.container {
width: 200px;
height: 200px;
background-color: skyblue;
display: flex;
}
.container .item {
width: 100px;
height: 100px;
border: 4px dashed red;
background-color: orange;
}
.container .item:nth-child(1) { flex-shrink:0; }
.container .item:nth-child(2) { flex-shrink:0; }
.container .item:nth-child(3) { flex-shrink:0; }
.container .item:nth-child(1) { flex-shrink:0; }
.container .item:nth-child(2) { flex-shrink:1; }
.container .item:nth-child(3) { flex-shrink:2; }
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.