html - 使用内部带有滚动 div 的 flex 容器

Question

我有一个侧面板。在那个侧面板中，我想要两个单独的面板堆叠在一起，包含 3 个 div。其中两个包含的 div 将具有固定高度，并且永远不会超过该固定高度。第三个 div 具有可变数量的元素，如果它超过列的高度，我希望这些元素可以滚动。两个顶层面板不应像现在这样超过窗口的高度。

当然，您会遇到一个列表比另一个长的情况，在这种情况下，您希望较长的列表占据大部分空间。到目前为止，我有以下代码:

#column {
  float: right;
  width: 250px;
  max-width: 250px;
  height: 100%;
}

#debug {
  display: flex;
  height: inherit;
  flex-direction: column;
}

#debug>div {
  background-color: #eee;
  border: 1px solid black;
  box-sizing: border-box;
}

#sistack div,
#threads div {
  display: block;
  height: 30px;
  width: 100%;
}

#sistack,
#threads {
  min-height: 60px;
}

.toolbar {
  height: 50px;
  background-color: blue;
  width: 100%;
}

<div id=column>
  <div id=debug>
    <div>
      <span>Hello Sir</span>
      <div class=toolbar></div>
      <div id=sistack>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </div>
    </div>
    <div>
      <span>Threads</span>
      <div class=toolbar></div>
      <div id=threads>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </div>
    </div>
  </div>
</div>

我怎样才能让 flex 将屏幕高度平均分配给两个顶级面板，并在必要时在列表 (#sistack,#threads) 中有滚动条？

Answer 1

我不确定我是否明白你的意思，但为了有一个滚动的 div，你需要使用固定高度并添加一个 overflow-y 或 x 来滚动。

#sistack,#threads{
    height:60px;
    overflow-y: scroll;
}