<h2>flex-shrink: 0</h2>
<div class="flex">
<div class="item item-0"></div>
</div>
<h2>flex-shrink: 1</h2>
<div class="flex">
<div class="item item-1"></div>
</div>
.flex {
border: 1px solid #000;
display: flex;
width: 50%;
padding: 0 4px;
}
.item {
flex-shrink: 0;
&.item-1 {
flex-shrink: 1;
}
box-sizing: border-box;
width: 180%;
margin: 8px 4px;
padding: 64px 0;
background: #faa;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.