柔性容器中不可见的儿童元素

Question

我已将我的div输入到容器{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>