Children elements not visible in flex container

Question

I have input my divs into container{ display: flex}. Once I get rid of display:flex it works fine and I can see my html. Also I found that if I change my percentage to px I can view my page.

Why is this ?

 * { padding: 0; margin: 0; box-sizing: border-box; margin-top: .2%; } #container { display: flex; flex-flow: row wrap; } #one { float: left; background-color: black; width: 25%; height: 100vh; margin-left: 2%; } #two { float: right; background-color: grey; width: 70.5%; height: 100vh; margin-right: 2%; } 

 <div id="container"> <div id="row"> <div id="one"></div> <div id="two"></div> </div> </div> 

Answer 1

 html, body{ height:100%;} /* not needed but good to have it */ * { padding: 0; margin: 0; box-sizing: border-box; /*margin-top: .2%; /* why? it'll mess with vh100 adding scrollbars.. */ } /*#container { you mean... */ #row { display: flex; flex-flow: row wrap; } #one { /* float: left; /* unnecessary, now parent is flex */ background-color: black; width: 25%; height: 100vh; margin-left: 2%; } #two { /* float: right; /* unnecessary, now parent is flex */ background-color: grey; width: /*70.5%; you mean... */ 71%; height: 100vh; margin-right: 2%; } 

 <div id="container"> <div id="row"> <div id="one"></div> <div id="two"></div> </div> </div>