Flexbox grandchildren not expanding children height

Question

In this example, the grandchild has a height of 150% of the parent height. This means that it's 50% longer than the parent.

25% of the grandchildren gets "clipped" as a result.

If I do not use a relative height it does work as intended.

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