html - Flexbox元素不滚动溢出

Question

我目前正在尝试使侧边栏布局发挥作用。我觉得我已经快到了，但最后一点不起作用。

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>

这是一个布局的 fiddle ，它比上面的代码片段更能看到问题: https://jsfiddle.net/ybp4og8w/1/

一切都很好，除非窗口的高度变得非常小，小于菜单项列表。底部的内容从屏幕上消失。理想情况下，我希望将用户列表粘在底部(现在是正确的，但我在弄乱代码时也遇到了这个问题)，当高度变小时不重叠菜单项，而是制作侧边栏变得可滚动。

关于如何实现这一目标有什么建议吗？

Answer 1

我看到您的jsfiddle并在#sidebar中应用此代码

overflow-y:scroll;

可能会有帮助。

谢谢!