Flex Div的高度不是100％

Question

我身体全高，但是包含最小高度为100％的div不会填充。我希望蓝色填充它的身体容器并弯曲对齐内部div。

https://codepen.io/steventnorris/pen/oVdKqY

html {
  min-height: 100%;
  width: 100%;
}

body {
  min-height: 100%;
  width: 100%;
  background-color: green;
}

.main {
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}

<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Answer 1

你可能想要通过Height Calculation By Browsers : Containing Blocks and Children。显然height和min-height在CSS中不是一回事。

---

将min-height更改为height为您的body和html - 请参阅下面的演示：

html{
  height: 100%; /* changed to height */
  width: 100%;
}
body{
  height: 100%; /* changed to height */
  width: 100%;
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}

<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

您还可以将height: 100vh提供给main元素以设置flexbox的内在高度 - 请参阅下面的演示：

body{
  margin: 0;
  height: 100vh; /* full viewport height */
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}

<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Answer 2

你可以给.main类一个100vh的最小高度。

.main{
 display: flex;
 flex-direction: row;
 min-height: 100vh;
 justify-content: space-between;
 background-color: blue;
 }

但是：Kua zxsw指出