当我将flexbox-column高度设置为100％时，它会使其父级高度更大[重复]

Question

这个问题在这里已有答案：

• 为什么百分比高度不适用于我的div？ [重复] 2个答案
• Chrome / Safari没有填充100％高度的flex parent 4答案

不知道为什么flexbox像我这样做了我，但我有一个height: 80vh标题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格比头设置80vh大。