<div class="parent">
<div class="child">I have flex-basis: 0</div>
<div class="child">I have flex-basis: auto</div>
<div class="child">I have flex-basis: 50%</div>
</div>
.parent {
display: flex;
width: 100%;
border: thick solid red;
}
.child {
flex-grow: 0;
flex-shrink: 0;
height: 100px;
border: thick solid blue;
}
.child:first-child {
flex-basis: 0;
}
.child:nth-child(2) {
flex-basis: auto;
}
.child:nth-child(3) {
flex-basis: 50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.