here's an example of i'm trying accomplish.
basically want dom structure this:
<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>
but want grandchildren's flex properties reflected if siblings.
here's css have currently:
.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; }
i want render this:
however, it's rendering this:
i made you're aiming for. have updated jsbin.
<div class="parent"> <div class="child child-flex flex-2"> <div class="grandchild flex-3"> wide grandchild </div> <div class="grandchild flex-1"> narrow grandchild </div> </div> <div class="child child-flex flex-1"> <div class="grandchild flex-2"> medium grandchild </div> </div> </div>