Flexboxes using percentages
<p><a href="https://jsfiddle.net/lars_jensen/djaec2th/1/" rel="nofollow">https://jsfiddle.net/lars_jensen/djaec2th/1/</a></p>

<p>I am trying to create a fully reponsive site using nothing but percentages, but I have a problem (see jsfiddle).</p>

<p>What I want is to center all divs on the site, but when I change 
the #wrapper-height from px to %, the #wrapper plus the two divs inside disappears.</p>

<p>What is the solution to center the wrapper and still use %???</p>

<p>The HTML is very simple (it's just an example):</p>

<pre><code>&lt;body&gt;
    &lt;div id="wrapper"&gt;
        &lt;div class="firstDiv"&gt;
            &lt;div class="secondDiv"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Followed by the CSS:</p>

<pre><code>&lt;style&gt;
* {
margin:0;
padding:0;
}

body {
background-color:blueviolet;
display:flex;
width:100%;
height:100%;
}

#wrapper {
width:60%;
height:600px;
margin:auto;
background-color:coral;
display:flex;
}

.firstDiv {
width:50%;
height:50%;
background-color:antiquewhite;
margin:auto;
display:flex;
}

.secondDiv {
width:50%;
height:50%;
background-color:chartreuse;
margin:auto;
}
&lt;/style&gt;
</code></pre>