不能溢出：在 flexbox 中滚动内部 div

Question

我试图防止 flexbox 子元素溢出它的容器，但在子 div 上使用 overflow:auto 似乎不起作用。

我的基本设置：我有一个 flexbox 容器，里面有 2 个 div，A 和 B。A div 有 2 个内部 div，A1 和 A2，而 B div 只有一个内部 div B1。我试图让 A1 和 B1 保持静态，并在 A2 溢出时显示滚动条。

html:

<div class="wrap">
  <div class="A">
    <div class="A1">A1</div>
    <div class="A2">A2</div>
  </div>
  <div class="B"><div class="B1">B1</div></div>
</div>

css

.wrap {
  display: flex;
  flex-direction: column;
  Height: 400px;
  justify-content: space-between;
  background-color: gray;
}

.A {
  display: flex;
  flex-direction: column;
  flex: 1, 1, auto;
}

.B {
  display: flex;
  flex-direction: column;
  flex: 0, 0, auto;
}

.A1 {
  background-color: yellow;
  flex: 0, 0, auto;
}

.A2 {
  background-color: green;
  flex: 1, 1, auto;
  overflow: auto;
  height: 800px;
}

.B1 {
    background-color: blue;
  flex: 0, 0, auto;
    
}

enter image description here

这是一个代码示例： https://codepen.io/guybarn/pen/QWvWVMb

Answer 1

如果你想滚动A2，那么它应该是溢出的A2。但在你的情况下，你正在溢出.wrap。当您设置 A2 as height:800px; 和 A as flex:0, 0, auto; 时，您的 A class div 会扩展，结果会溢出您的 .wrap which is height:400px;。

因此，您需要设置一个固定高度并为A2 添加overflow-y:scroll，其中高度应与换行高度兼容，以免溢出，并在您的内容位于A2 内时将滚动条添加到您的A2溢出。以下应该更好地代表您的需求：

编辑：由于我误解了这个问题，所以这里编辑有更好的解决方案。 正如我已经提到的，溢出是子容器的高度超过父容器的结果。在这种特殊情况下，A2 的高度会溢出其父级A，结果会溢出.wrap。

解决方案是 min-height: 0;（或某个实际值）。我们将此添加到 flex 子元素中，否则包含其他元素的 flex 子元素不会缩小到超过这些元素的“隐含高度”。

所以我们要做的就是将min-height:0（或其他值）设置为A.，并将min-height:0（或其他值）和overflow-y:scroll;设置为A2类。如果您需要更多info 或similar 示例，请点击此处。

.wrap {
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: space-between;
  background-color: gray;
  }

.A {
  min-height:0;
  display: flex;
  flex-direction: column;
  flex: 1, 1, auto;
}

.B {
  display: flex;
  flex-direction: column;
  flex: 0, 0, auto;
}

.A1 {
  background-color: yellow;
  flex: 0, 0, auto;
}

.A2 {
  background-color: green;
  flex: 1;
  min-height:0;
  overflow-y:scroll;
}

.B1 {
    background-color: blue;
    flex: 0, 0, auto;
    
}

<div class="wrap">
  <div class="A">
    <div class="A1">
      <div>A1</div>
      <div>A1</div>
    </div>
    <div class="A2">
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
    </div>
  </div>
  <div class="B">
    <div class="B1">
      <div>B1</div>
      <div>B1</div>
     </div>
   </div>
</div>