2
我正在尝试使侧边栏布局工作。我觉得我已经快到了，但最后一点还不行。Flexbox元素不滚动溢出
html,body {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
width: 100%;
height: 100%;
}
.sidebar {
height: 100%;
position: fixed;
width: 200px;
background: red;
overflow: auto;
flex-direction: column;
display: flex;
}
ul {
padding: 0;
margin: 0;
}
.menu {
flex: 1;
background: rgb(150,0,0);
}
.users {
overflow: auto;
max-height: 240px;
min-height: 100px;
}<div id="wrapper">
<div class="sidebar">
<ul class="menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<ul class="users">
<li>user 1</li>
<li>user 2</li>
<li>user 3</li>
</ul>
</div>
<div class="content">
</div>
</div>这里是工作得更好看问题比上面的代码布局的小提琴： https://jsfiddle.net/ybp4og8w/1/
所有作品除了当窗口的高度变得非常大小，小于菜单项目列表。底部的内容在屏幕上消失。理想情况下，我希望将用户列表粘贴在底部（现在是正确的，但在处理代码时我也遇到了这个问题），当高度变小时不重叠菜单项，而是使边栏变得可卷动。
有关如何实现此目的的任何提示？