html - 子元素在 flex 容器中不可见

Question

我已经将我的 div 输入到容器 { display: flex} 中。一旦我摆脱了 display: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>