Check out this example to see what I'm aiming for.
I am looking to achieve a DOM structure as follows:
<div class="parent">
<div class="child">
<div class="grandchild flex-3">
Wide Grandchild
</div>
<div class="grandchild flex-1">
Narrow Grandchild
</div>
</div>
<div class="child">
<div class="grandchild flex-2">
Medium Grandchild
</div>
</div>
</div>
My aim is to have the grandchildren's flex properties act like siblings.
Here is my current CSS code snippet:
.parent {
display: flex;
}
.grandchild {
background-color: rebeccapurple;
color: #ddd;
padding: 6px;
border: solid 2px #ddd;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
This is how I want it to look:
Narrow Grandchild | Wide Grandchild Medium Grandchild
However, this is how it currently appears: