From 规格 https://www.w3.org/TR/css-sizing-3/#percentage-sizing
有时，百分比大小的盒子的包含块的大小取决于盒子本身的内在大小贡献，从而创建循环依赖。当计算此类盒子的固有大小贡献（包括基于内容的自动最小大小的任何计算）时，循环百分比......
然后是一整套complex规则和：
然后，除非另有说明，在计算包含块内容的使用大小和位置时：
-
如果由于包含块上的块大小或最大块大小导致它依赖于其内容的大小而引入循环依赖性，则该框的百分比不会被解析，而是表现为自动。
-
否则，将根据包含块的大小来解析百分比。 （包含块的大小不会根据框的结果大小重新解析；因此内容可能会溢出或下溢包含块）。
基本上我们需要看看是否可以在没有任何循环依赖的情况下解决百分比问题。
在第二种情况下，您将容器定义为具有min-height这意味着它的高度将由下式定义其内容所以我们需要首先知道内容高度来找到容器的高度，这将使百分比高度无法自动，因为我们无法解析它，因为我们只有min-height:300px我们还需要根据内容找到高度。
在第一种情况下，您定义了容器height:100%所以高度已经定义了，但我们仍然只有min-height在子元素中。这里有点复杂，因为可以使用 flex 属性找到该元素的高度。基本上，浏览器可以在不知道其内容的情况下解析该元素的高度，然后使用计算出的高度来解析百分比值。
这是一个更好说明的基本示例：
.box {
display: flex;
flex-direction: column;
border:1px solid red;
margin:10px;
}
.box>div {
border: 1px solid;
}
.height {
height: 80%;
background: red;
}
<div class="box" style="min-height:200px;">
<div style="min-height:100px;">
<div class="height">content here</div>
</div>
</div>
<div class="box" style="height:200px;">
<div style="min-height:100px;">
<div class="height"> content here</div>
</div>
</div>
<div class="box" style="height:200px;">
<div style="flex-basis:50%;">
<div class="height"> content here</div>
</div>
</div>
<div class="box" style="height:200px;">
<div style="flex-grow:1;">
<div class="height"> content here</div>
</div>
</div>
您可以看到，在定义了 Flex 容器高度的所有情况下，我们都能够解析嵌套元素的百分比高度，因为浏览器无需内容即可计算高度。
实际上，内容还用于定义高度，这增加了复杂性。让我们考虑下面的例子：
.box {
display: flex;
flex-direction: column;
border: 1px solid red;
margin: 10px;
}
.box>div {
border: 1px solid;
}
.height {
height: 80%;
background: red;
}
<div class="box" style="height:200px;">
<div style="flex-basis:50%;">
<div class="height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nunc sit amet justo congue, et convallis diam porttitor. Curabitur semper tellus eget semper vehicula. In auctor ut nunc vitae faucibus. Integer molestie aliquam lacinia.
Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.
Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.</div>
</div>
</div>
您可以看到文本溢出了红色 div（其容器），并且 Flex 项目的高度与文本的高度匹配。在这种情况下，浏览器仍然能够根据 Flex 属性来识别 Flex 项目的高度，并且这些属性也会考虑内容！
弹性项目无法缩小超过其内容 https://stackoverflow.com/q/36247140/8620333尺寸 这就是原因flex-basis:50%没有给予50%父高度的最小值，但 50% 和内容高度之间的最小值。
如果你添加min-height:0你将会有不同的行为：
.box {
display: flex;
flex-direction: column;
border: 1px solid red;
margin: 10px;
}
.box>div {
border: 1px solid;
}
.height {
height: 80%;
background: red;
}
<div class="box" style="height:200px;">
<div style="flex-basis:50%;min-height:0">
<div class="height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nunc sit amet justo congue, et convallis diam porttitor. Curabitur semper tellus eget semper vehicula. In auctor ut nunc vitae faucibus. Integer molestie aliquam lacinia.
Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.
Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.</div>
</div>
</div>
现在弹性项目正在使用50%父元素的高度（忽略其内容），则其子元素正在采用80%这个高度和内容在逻辑上是溢出的。
TL;DR
一个弹性项目（当弹性方向是列并且弹性容器有明确的高度时）的高度将由弹性属性定义，并考虑内部的内容（基本上内容只会设置min-height约束），然后在计算该高度后，浏览器可以解析内部项目的高度的任何百分比值。
这是一个相关的问题，我们有类似的问题，并且我们能够解决百分比值：为什么我的网格元素的高度计算不正确？ https://stackoverflow.com/a/52137966/8620333
