<div class="container1">
<div class="flex">flex-basis</div>
<div class="width">width</div>
</div>
</br></br>
<div class="container2">
<div class="flex">flex-basis</div>
<div class="width">width</div>
</div>
.container1 {
padding: 5px;
border: black solid 1px;
display: flex;
}
.container2 {
padding: 5px;
border: black solid 1px;
display: flex;
flex-direction: column;
}
.flex {
flex-basis: 200px;
border: red solid 1px;
margin-bottom:10px
}
.width {
width: 200px;
border: blue solid 1px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.