固定页眉和页脚，在1fr CSS网格区域内有可滚动的侧边栏

Question

我有一个用于webapp的CSS网格布局，具有固定大小的页眉和页脚（用rem单位定义），以及包含两个侧边栏的可扩展中心行（定义为1fr）和一个中心内容区域。外部网格容器定义为宽度和高度以填充视口（100vw/vh）。我希望中心行占用页眉和页脚之间的所有空间，以及任何要滚动的溢出，而不是扩展页面的高度。

我尝试了各种可能的解决方案，包括使用overflow-y:scroll，但似乎没有任何效果。额外的内容使页面更长，而不是使区域可滚动。

我不想为中心行使用固定大小，因为我希望它能够扩展以适应任意大的屏幕。

这是我布局的一个相当小的例子：

https://codepen.io/Shepazu/pen/EwePgB

（请注意，HTML和CSS中的嵌套区域是有意的，因此任何解决方案都应该只是CSS，不应该更改HTML标记。）

Answer 1

假设页眉和页脚的固定高度为100px，则将样式赋予内容区域：

.center-row {
max-height: calc(100vh - 200px);
overflow-y: auto;
}