CSS网格固定高度滚动容器防止内部背景占据整个高度

Question

我有一个固定高度的滚动div，里面有一个滚动条、一个标题和一些内容。我希望侧边栏占据固定高度容器的整个高度，但是背景被限制为滚动高度并被切断。

无法将包装设置为滚动。

在下面的片段中，可以通过滚动容器来看到这一点。

.wrapper {
height: 200px;
}

.container {
display: grid;
grid-template-areas: "Sidebar Header" "Sidebar Main";
grid-template-rows: min-content 1fr;
grid-template-columns: min-content 1fr;
flex-direction: column;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.sidebar {
grid-area: Sidebar;
background: red;
}
.header {
grid-area: Header;
background: blue
}
.main {
grid-area: Main;
background: green;
}

<div class="wrapper">
<div class="container">
<div class="sidebar">
<p>Sidebar</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="header">
<p>Header</p>
</div>
<div class="main">
<p>Main</p>
</div>
</div>
</div>

Answer 1

将高度替换为最小高度，并将滚动应用于包装器：

.wrapper {
height: 200px;
overflow-y: scroll;
}

.container {
display: grid;
grid-template-areas: "Sidebar Header" "Sidebar Main";
grid-template-rows: min-content 1fr;
grid-template-columns: min-content 1fr;
flex-direction: column;
min-height: 100%;
}
.sidebar {
grid-area: Sidebar;
background: red;
}
.header {
grid-area: Header;
background: blue
}
.main {
grid-area: Main;
background: green;
}

<div class="wrapper">
<div class="container">
<div class="sidebar">
<p>Sidebar</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="header">
<p>Header</p>
</div>
<div class="main">
<p>Main</p>
</div>
</div>
</div>