I have flex-container that contains navbar, body and footer.
I need .child be 100% height. Code I have:

.wrapper {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.navbar, .footer {
  max-width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}

.body {
  max-width: 100%;
  flex-grow: 1;
}

.child {
  height: 100%;
} 

<div class="wrapper">
  <div class="navbar">
    ...
  </div>

  <div class="container">
    <div class="child"></div>
  </div>

  <div class="footer">
    ...
  </div>
</div>

At this example .child height isn’t 100% as expected.