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/
所有作品除了當窗口的高度變得非常大小，小於菜單項目列表。底部的內容在屏幕上消失。理想情況下，我希望將用戶列表粘貼在底部（現在是正確的，但在處理代碼時我也遇到了這個問題），當高度變小時不重疊菜單項，而是使邊欄變得可捲動。
有關如何實現此目的的任何提示？