我知道在CSS中，高度为100%的容器应该适应其父容器的高度
但是，如果我将一个元素放在只有最大高度属性的容器中，会发生什么
在这种情况下，我的容器根本不会出现。你可以在这个代码笔中找到我的实验：https://codepen.io/web265p3/pen/eYMwjgd
<body>
<div class="outer">
<div class="inner">
<div class="inner-inner"></div>
</div>
</div>
</body>
和CSS：
.outer {
background-color: yellow;
height: 1000px;
width: 300px;
}
.inner {
min-height: 500px;
width: 200px;
background-color: green;
}
.inner-inner {
height: 100%;
width: 100px;
background-color: aqua;
}
你可以找到一个div，里面有一个class.inner，它的高度是100%
它包含在另一个最小高度为500px的元素中。
我原以为.inner的内部是500像素高，但事实并非如此。它的高度为0。
好吧，所以可能100%的高度只有在存在真正的"；高度"；属性
事实上，如果我增加一个高度，内部就会变得可见，但并不像预期的那样
它现在完全填充父对象，并且不继承height属性，而是突然继承最小高度！？？你可以在这里找到：https://codepen.io/web265p3/pen/VwXJBQG
这对我来说是一种违反直觉的行为。你能解释一下为什么浏览器的行为如此奇怪，并在我更改后继承了一个最小高度吗？
height: 100%属性的百分比是根据包含块的高度计算的。如果包含块没有指定的固定高度，则百分比无效，并且在场景后面，它将默认为auto(如果内部没有内容，则为零(。
因此，要使百分比高度作用于流入子对象，父对象必须具有设定的高度。
在您的示例中，只需将显示方法设置为外部容器，然后将高度设置为填充父对象即可解决您的问题，这里有一个更新的CodePen。
* {
box-sizing: border-box;
}
.outer {
background-color: yellow;
height: 1000px;
width: 300px;
}
.inner {
min-height: 500px;
width: 200px;
background-color: green;
display: flex;
}
.inner-inner {
height: fill;
width: 100px;
background-color: aqua;
}<body>
<div class="outer">
<div class="inner">
<div class="inner-inner"></div>
</div>
</div>
</body>max-height不是子元素中百分比高度的充分基础。百分比高度设置需要父元素上的height设置(如果该设置是一个百分比值，则其父元素再次需要height设置，依此类推，直到html元素…(
这实际上是一个bug：https://bugs.webkit.org/show_bug.cgi?id=26559(显然仍未修复(
有几种方法可以解决这个问题。例如：
.inner -> position: relative
.inner-inner -> position: absolute
或
.inner -> height: 1px; min-height: 100%