Detailed items not visible in a flexible container

Question

I have my divs in the {display: flex} container. As soon as I get rid of the display: flex it works fine and I see my html. I also 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>