我在实现嵌套网格结构时遇到了问题。这是一个简化的例子。正如你所看到的，嵌套结构给出了外部结构的高度，从而在身体之外生长。我想要实现的是使.content__inner元素，并且只有该元素可滚动。其他一切都应该在视口内。我怎样才能做到这一点？
编辑 1： 只是为了澄清，我在身体上使用 100vh，但不想将它设置在容器上。容器应该具有其父级的高度，无论它是什么。
body {
display: block;
height: 100vh;
width: 100%;
background-color: white;
margin: 0;
}
.container {
max-height: 100%;
display: grid;
grid-template-areas: "header header" "side content" "footer footer";
grid-template-columns: 50px auto;
grid-template-rows: min-content minmax(min-content, max-content) min-content;
}
.header {
grid-area: header;
background-color: rgba(255, 255, 0, 0.3);
}
.side {
grid-area: side;
background-color: rgba(0, 255, 0, 0.3);
}
.content {
grid-area: content;
background-color: rgba(0, 0, 255, 0.3);
}
.overflow {
overflow: auto;
}
.content-item …