Flexbox孙子孙女不扩大儿童身高

Question

在此示例中，孙子的高度为父高度的150％。这意味着它比父母长50％。

25％的孙子孙女因此被“剪掉”。

如果我不使用相对高度，它确实可以正常工作。

.children {
  min-height: 50vh;
}

#a {
  background-color: red;
}

#b {
  background-color: blue;
}

.grandchildren {
  height: 150%;
  border: 5px dotted white;
}

<link href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" rel="stylesheet"/>
<div class="pure-g">
  <div id="a" class="children pure-u-1">
    <div class=" grandchildren pure-g">
    </div>
  </div>
  <div id="b" class="children pure-u-1">
  </div>
</div>