Html Flexbox非兄弟孙辈

以下是我试图实现的目标

基本上，我想要这样的DOM结构：

<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>

我希望它呈现如下：

<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>

但是，它的渲染方式如下所示：

<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>

---

我让它看起来像你的目标。我已经更新了你的密码

宽孙子
小孙子
中孙子

我使用这是我使用的解决方案使其正常工作。我使用angular，可以计算孙子的弯曲宽度，并将孙子的总和应用到孩子身上。效果很好。