无法溢出：在 flexbox 中滚动内部 div

Question

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

我的基本设置：我有一个 flexbox 容器，有 2 个 divs，A 和 B。A div 有 2 个内部 divs，A1 和 A2，而Bdiv内部只有一个divB1。我试图让 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 其中高度应该与 wrap 的高度兼容所以它不会溢出并添加滚动条到你的 A2 当 A2 中的内容溢出时。以下应该更好地代表您的需求：

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

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

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

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

无法溢出：在 flexbox 中滚动内部 div

Can't overflow: scroll internal div in flexbox

css

overflow

flexbox