我有一个#，它与container，nav和main节点适合整个视口。 footer节点需要填充页面的所有可用空间，因此其高度是动态的。在main节点内部，我有一个简短的节点层次结构，其中main节点可能不适合父节点。
cats我想强制 <div class="container">
<nav>
<input />
</nav>
<main>
<div class="scrollable">
<div class="cats">
<img src="https://placekitten.com/300/300" />
<img src="https://placekitten.com/300/300" />
<img src="https://placekitten.com/300/300" />
<img src="https://placekitten.com/300/300" />
</div>
</div>
<div class="cat">
<img src="https://placekitten.com/280/280" />
</div>
</main>
<footer>
<button>
Click me!
</button>
</footer>
</div>
节点填充scrollable父节点，但是当其子节点溢出时，显示垂直滚动条。无论如何，我都不希望main节点的大小适合孩子，从而导致内容不适合视口。
main此解决方案适用于...在Chrome下。它不在Firefox下。我感到html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
flex-direction: column
}
main {
flex: 1;
display: flex;
}
.scrollable {
flex: 1;
display: flex;
overflow-y: scroll;
}
.cats {
flex: 1;
display: grid;
grid-auto-columns: 1fr;
grid-gap: 10px;
}
的这个链条不可行。对于任何使它变得更通用的热衷，我将深表感谢。
这是一个工作的小提琴：https://jsfiddle.net/ktguLn73/13/
有趣的是，当我将flex放在overflow-y: scroll节点上时，它可以在Chrome和Firefox中使用。但这不是我想要的结果。
谢谢您的帮助。
答案 0 :(得分：0)
我记得读过一篇类似问题的文章，其中firefox不会使用flex oveflow滚动。请查看此页面，看看是否有帮助：https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/
通读文章，并在容器上最小高度为0解决了firefox中布局的问题。