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

Question

I came across this issue today and can't make sense of why the block1 element is less height than block2 after specifying height: 100% in block1. Why does it behave this way?

Codepen Example

<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

The parent div container doesn't have a fixed height. Therefore, the height is based on the content, it takes 100% of the inner content (= height: auto). I added a fixed height to the codepen and you can see that, now, the div takes 100% of the container height.

Codepen example