为什么在这个例子中 height: 100% 会使高度变小？

Question

我今天遇到了这个问题，无法理解为什么在 block1 中指定 height: 100% 后 block1 元素的高度小于 block2。为什么会这样？

<div class="container">
  <div class="block1">
    <p>Hello</p>
    <p>World</p>
  </div>
  <div class="block2">
    <p>Hello</p>
    <p>World</p>
  </div>
</div>

.container {
  display: flex;
  justify-content: space-around;
  min-height: 400px;
}

.block1 {
  border: 1px solid red;
  width: 300px;
  margin: 50px;
  padding: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.block2 {
  border: 1px solid blue;
  width: 300px;
  margin: 50px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Answer 1

parentdivcontainer没有固定的高度。所以，高度是根据内容来的，它取里面内容的100%(=height: auto)。我在 codepen 中添加了一个固定高度，你可以看到，现在 div 占据了容器高度的 100%。

Codepen example

为什么在这个例子中 height: 100% 会使高度变小？

Why does height: 100% make the height smaller in this example?

css

height