<div class="parent">
<div class="child">
<div class="grandchild">
My parent has flex-basis: 200px and flex-grow: 1.
</div>
</div>
<div class="child">
<div class="grandchild">
My parent has flex-basis: 200px and flex-grow: 1.
</div>
</div>
<div class="child">
<div class="grandchild">
My parent has flex-basis: 200px and flex-grow: 1.
</div>
</div>
</div>
div {
box-sizing: border-box;
}
.parent {
display: flex;
flex-wrap: wrap;
width: 500px;
border: thick solid red;
}
.child {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
height: 100px;
border: thick solid blue;
}
.grandchild {
width: 200px;
border: thick solid green;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.