在弹性内容中仅滚动侧边栏

Question

我有一个包装器，它包含两个div。我希望内容是固定的，因此不可滚动。侧边栏包含一个用户名列表，因此它通过y滚动显示了大量内容。

我尝试过很多东西，比如添加display:auto但它一直在滚动整个页面。

以下是我的HTML文件的样子。

<div class="wrapper">
<!-- Sidebar  -->
<div id="sidebar">
<div class="sidebar-header"></div>
<div class="sidebar-filter"></div>
<ul class="list-unstyled components"></ul>
</div>
<!-- Page Content  -->
<div id="content">
CONTENT
</div>
</div>

这是CSS文件。

.wrapper {
display: flex;
width: 100%;
align-items: flex-start;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}

虽然这看起来很容易，但我被这个问题卡住了两天。

Answer 1

使用overflow-y: scroll;并将固定的height(例如：height: 120px;(设置为#sidebar

编辑

给你评论

我希望侧边栏是全高的，

使用height:100vh

.wrapper {
display: flex;
width: 100%;
align-items: flex-start;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
height: 100vh;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}

<div class="wrapper">
<!-- Sidebar  -->
<div id="sidebar">
<div class="sidebar-header"></div>
<div class="sidebar-filter"></div>
<ul class="list-unstyled components">
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
<li>user name</li>
</ul>
</div>
<!-- Page Content  -->
<div id="content">
CONTENT
</div>
</div>