CSS height in % doesn't work only with React
<p>I have a wierd problem. I have exactly the same DOM and CSS rendered with React and rendered with pure HTML. However, in React children of the div.container doesn't get the proper height when it's set in %. It works well when it's set with vh or with px, but I can't use those. Any idea why? And how to fix this problem?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.form label:after, div.wrapper:after, div.container:after {
  display: block;
  content: '.';
  clear: both;
  height: 0;
  visibility: hidden;
  line-height: 0;
  padding: 0;
  margin: 0;
}
body {
  width: 100%;
  margin: 0;
  min-width: 319px;
  min-height: 479px;
  background-color:black;
}
div.container {
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-height: 1368px;
  max-width: 1368px;
  min-width: 319px;
  min-height: 100%;
  position: relative;
  background-color:red;
}
nav {
  width: 82px;
  height: 100%;
  height: 100vh;
  max-height: 1368px;
  float: left;
  z-index: 1000;
  overflow: hidden;
  background-color: #55c7f9;
}
header {
  height: 15%;
  margin: 0 6%;
  float: initial;
  position: relative;
  width: calc(100% - 80px);
  background-color:orange;
}
div.wrapper {
  min-height: calc(100% - 62px);
  height: auto;
  width: calc(100% - 80px);
  float: right;
  background-color:yellow;
}
div.main {
  width: 90%;
  height: 100%;
  box-sizing: border-box;
  margin: auto;
  padding-bottom: 10px;
  height: calc(100% - 158px);
  background-color:green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;nav&gt;&lt;/nav&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="main"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>