当我将flexbox-column的高度设置为100％时，它会使它的父母高度变大

Question

不知道为什么flexbox会像这样大声笑，但我有一个带有height: 80vh的标头，其中包含一个导航栏和一个英雄图像。导航栏是其自身的元素，英雄图像是其自身的元素，而flexbox是英雄图像中的一个元素。

我将英雄图片设置为height: 100%，而flexbox设置为`flex-direction：列。因为我想将flexbox放置在英雄图像的中间，所以我将flex容器的高度设置为100％，但这会使英雄图像比标题的80vh高。不知道为什么会这样。

侧面注：：我知道我可以将英雄图像定位为相对图像，并在使用转换转换使框居中时定位div绝对值。我正在尝试学习flexbox，并寻求有关为什么出现这种症状的帮助。

index.html-我省略了导航栏html

.header {
  display: flex;
  flex-direction: column;
  height: 80vh;
}

.header__container {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.3);
  background-color: #fff;
  align-items: center;
  border-bottom: 2px solid black;
}

.header__featuredPost {
  height: 100%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url('gaming2.jpg');
  background-size: cover;
  background-position: center;
  outline: .5rem solid black;
}

.header__featuredPost-parentContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

<div class='header__container'>

  <div class='header__featuredPost'>
    <div class='header__featuredPost-parentContainer'>
      <h2 class='header__featuredPost-parentContainer--heading'>
        Top 10 animals
      </h2>
      <a href='#' class='btn btn__readMore'>Read More</a>
    </div>
  </div>
</div>

TLDR 为什么将 .parentContainer 的高度设置为100％会使 featuredPost div大于由标头。