1

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>
MinusFour
  • 13,913
  • 3
  • 30
  • 39
  • The whole point of flexbox is to keep elements contained in their container – StefanBob Apr 13 '17 at 18:56
  • This seems to be a common problem. [**google search**](https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css+height+of+child+doesn't+expand+height+of+parent) | [**stack search**](http://stackoverflow.com/search?q=css+height+of+child+doesn%27t+expand+height+of+parent) – Michael Benjamin Apr 14 '17 at 12:22

0 Answers0