我有一个flex容器，里面有flex孩子。 在每个flex-child中有两个相互重叠的div，第一个是身高未知的。 我想让第二个div的高度来填充整个剩余的高度。 我看到的每个地方都是flex解决方案，但是我不知道如何实现它，因为两个DIV的父级本身就是flex-child。
整个情况更加复杂，但我将尝试在这里简化代码:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"></div>
<div class="i-want-this-one-to-fill-remaining-height"></div>
</div>
...more flex children...
</div>
现在，把“。auto-height”div放在“。i-want-this-one-to-fill-remain-height”里面不是一个选择。
请帮忙:）谢谢！
当您提供现有的CSS以更好地理解您正在尝试做什么时，这将会更有帮助。 然而，我希望下面的例子将帮助你弄清楚如何解决你想要完成的事情。
HTML:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"> auto div</div>
<div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
</div>
</div>
CSS:
.flex-parent-row {
display: flex;
flex-direction: column;
height: 200px;
width: 500px;
border: 1px solid #000;
}
.flex-child {
border: 1px solid #000;
background-color: red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.auto-height {
background: orange;
}
.i-want-this-one-to-fill-remaining-height {
flex-grow: 1;
background-color: lightblue;
}
如果您需要更多的帮助，请提供更多的代码。
