https://jsfiddle.net/lars_jensen/djaec2th/1/
I am trying to create a fully reponsive site using nothing but percentages, but I have a problem (see jsfiddle).
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.
What is the solution to center the wrapper and still use %???
The HTML is very simple (it's just an example):
* {
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;
} <body>
<div id="wrapper">
<div class="firstDiv">
<div class="secondDiv"></div>
</div>
</div>
</body>
