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

Question

我试图防止 Flexbox 子项溢出其容器，但在子 div 上使用 Overflow:auto 似乎不起作用。

我的基本设置：我有一个包含 2 个 div 的 Flexbox 容器，A 和 B。A div 有 2 个内部 div，A1 和 A2，B div 只有一个内部 div B1。我试图保持 A1 和 B1 静态，并在 A2 溢出时在 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;
    
}

在此输入图像描述

这是一个代码示例： 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;。

\n

所以你需要的是设置一个固定的高度并添加overflow-y:scroll高度A2应与换行高度兼容的位置，这样它就不会溢出并将滚动条添加到你的A2在 A2 内的内容溢出时添加滚动条。以下应该更好地代表您的需求：

\n

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

\n

解决方案是 min-height: 0;（或一些实际值）。我们将其添加到 flex 子元素中，否则包含其他元素的 flex 子元素将\xe2\x80\x99t 缩小到超过这些元素的 \xe2\x80\x9cimplied height\xe2\x80\x9d 。

\n

因此，我们所要做的就是将min-height:0（或其他一些值）设置为A.And 设置min-height:0（或其他一些值）并将 andoverflow-y:scroll;设置为 A2 类。如果您需要更多信息或类似信息，请点击此处示例，请点击此处。

\n

\r\n

\r\n

.wrap {\n  display: flex;\n  flex-direction: column;\n  height: 200px;\n  justify-content: space-between;\n  background-color: gray;\n  }\n\n.A {\n  min-height:0;\n  display: flex;\n  flex-direction: column;\n  flex: 1, 1, auto;\n}\n\n.B {\n  display: flex;\n  flex-direction: column;\n  flex: 0, 0, auto;\n}\n\n.A1 {\n  background-color: yellow;\n  flex: 0, 0, auto;\n}\n\n.A2 {\n  background-color: green;\n  flex: 1;\n  min-height:0;\n  overflow-y:scroll;\n}\n\n.B1 {\n    background-color: blue;\n    flex: 0, 0, auto;\n    \n}

\r\n

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

\r\n

\r\n

\r\n

\n