Элементы детей, которые не видны в контейнере гибких контейнеров

Question

У меня есть мои divs в контейнер {display: flex}. Как только я избавлюсь от отображения: flex он отлично работает, и я вижу свой html. Также я обнаружил, что если я изменю свой процент на px, я могу просмотреть свою страницу.

Почему это?

* { 
 
    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>