使用带有滚动 div 的 flex 容器

Question

从表面上看，这个问题似乎很基本。我有一个侧面板。在该侧面板中，我希望将两个单独的面板堆叠在一起，其中包含 3 个 div。其中两个包含的 div 将具有固定高度，并且永远不会超过该固定高度。第三个 div 具有可变数量的元素，如果它超过列的高度，我希望它们可以滚动。两个顶级面板不应像现在那样超过窗口的高度。

我的麻烦是让 flex 将屏幕高度均匀地分配到两个顶级面板，并在必要时在列表（#sistack、#threads）中有滚动条。

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

#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>

我希望我解释得足够好，在此先感谢您的帮助:)

Answer 1

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

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