Flexbox非同胞孙辈

Question

这是我想要完成的事情的一个例子。

基本上，我想要一个这样的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>

但我希望孙辈们的弹性财产能像兄弟姐妹一样被反映出来。

下面是我目前拥有的CSS：

.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;
}

我要把它渲染成这样：

​

​

然而，它的渲染方式如下：

​

​

Answer 1

我让它看起来像你想要的。我更新了你的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>