如何使用纵横比实现2个div，并将第二个div拉伸父容器的剩余高度

Question

我的问题与让div(height(占据父级剩余高度非常相似，但我没有实现我想要的行为https://www.npmjs.com/package/resize-observer-polyfill但我是在一年前写的，现在我在阅读自己的代码时遇到了问题，所以我现在想用纯CSS实现同样的效果。

我能够去掉ResizeObserver，并通过为我的第一个div使用固定的高度来重写它：

return <div style={{height: "100%", maxHeight: "100%"}}>
<Card style={{height: "400px", overflowY: "auto", marginBottom: "10px"}}>
...
</Card>
<Card style={{height: `calc(100% - 410px)`}}>
...
</Card>
</div>

因此，我已经实现了一个非常类似的解决方案：第二个div使用剩余的高度，如果第一个div中的内容太大，则会显示内部滚动条。

问题是，在许多状态下，我不需要400px，所以我想对第一个div使用自动高度，但将其限制在最大60%，因此第二个div将至少获得40%的正确显示内容。我该如何做到这一点？

我已经尝试过flexGrow: 1了，但问题是，第二个div从父容器中长出来(尽管我已经设置了maxHeight: 100%(，导致出现我肯定想避免的外部窗口滚动条。

提前谢谢！

Answer 1

终于成功了！

对于所有可能感兴趣的人，我将解释实现这种布局的关键点。

下面的线索帮助我确定了为什么我的"；40%"；应用flex-grow: 1时，区域从父容器中扩展：使div填充剩余屏幕空间的高度

我不得不为填充区域添加overflow-y: auto;，然后一切都按预期进行。我花了一段时间才意识到这一点，因为在我40%的区域内，我有一个孩子https://www.npmjs.com/package/react-scroll-to-bottom我认为这会解决溢出问题，尽管我担心有2个滚动条，但我尝试了一下，结果成功了！

最后，这就是实现这种布局的CSS魔术：

.flex-ratio-container {
display: flex;
flex-flow: column;
height: 100%;
}
.flex-sized-to-content {
flex: 0 0 auto;
overflow-y: auto;
max-height: 60%;
}
.flex-fill-remaining {
flex: 1 1 auto;
overflow-y: auto;
}