html - Flexbox non-sibling grandchildren -


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:

enter image description here

however, it's rendering this:

enter image description here

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>