CSS Flex - 如何使 div 内容可滚动？

Question

我正在尝试创建一个有 2 个框的侧边栏。每个框可以包含任意数量的列表项（可能是数百项），但第一个可能只包含几个项，而第二个可能包含更多。

我有以下（在 ReactJS 中创建）：

<div class="drawer">
  <div class="drawerContainer">
    <div class="sideboxWrapper">
      <SideBox header="Box 1" />
      <SideBox header="Box 2" />
    </div>
  </div>
</div>

每个 SideBox 生成以下结构：

<div class="sidebox">
  <h2 class="boxheader">{header}</h2>
  <div class="boxContent">
    <ul class="sideboxList">
      <li class="listItemText listItemTextCurrent">Item 1</li>
      <li class="listItemText listItemTextCurrent">Item 2</li>
       ... more items ...
    </ul>
  </div>
</div>

所以，首先，我希望这些框填满侧边栏，但不要溢出它。如果盒子足够短以适合两者，那么它们都应该占用所需的空间，并且任何剩余空间都留空。如果它们不适合，那么它们应该占用可用空间，并且 boxContent div 应该可以滚动。

.drawer {
    flex: 0 0 240px;
    height: 100%;
    overflow-y: hidden;
    padding: 10px 0;
}

.drawerContainer {
    height: inherit;
    overflow: hidden;
    padding-bottom: 10px;
    padding-top: 10px;
}

.sideboxWrapper {
    display: flex;
    flex-direction: column;
    height: inherit;
    overflow: hidden;
}

.sidebox {
    margin: 10px;
    padding: 0px;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
}

.boxContent {
    overflow-y: auto;
}

我遇到的问题是，当其中一个列表很长时，sideboxes 只是扩展以适应它，即使这意味着超出 sideboxWrapper（溢出被隐藏，所以部分sideboxWrapper 之外的 sidebox 无法读取）。我想要发生的是 flex 布局将sideboxes 安排在sideboxWrapper 内，然后显示boxheaders 并调整boxContent 的大小（使用滚动条）以适应剩余空间。所以，长列表会有滚动条。

我怎样才能做到这一点？

Answer 1

这可能是你的 CSS，我添加了边框，这样你就可以看到你的一些盒子在哪里。在如此多的层次上使用 flexbox 需要清楚地遵循您在做什么，并查看 flex 的可用和需要。

* {
  box-sizing: border-box;
}
.drawer {
  width: 240px;/* without a flex parent that works too */
  height: 100vh;/* example for a full screen height */
  overflow-y: hidden;
  padding: 10px 0;
  border: solid;
}

.drawerContainer {
  height: 100%;
  padding-bottom: 10px;
  padding-top: 10px;
}

.sideboxWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: solid green;
  overflow: hidden;
}

.sidebox {
  margin: 10px;
  padding: 0px;
  flex-basis: 50%;/* make it half */
  display: flex;
  flex-direction: column;
  min-height: 0;/* what is needed */
}

.boxContent {
  flex-grow: 1;
  overflow-y: auto;
}