Flex 容器垂直溢出父 div

Question

I\xc2\xb4m 目前正在尝试创建具有固定页眉和页脚以及动态内容区域的 yome 类型布局，该布局应使用剩余的垂直空间。内容包装器有一个内容容器，可以包含大量数据，因此可以出现滚动条。

\n\n

但现在问题来了：正如您所看到的，模拟页面高度的主包装器应该停在 200px 高度，但正在被内容容器拉伸。

\n\n

我不想\xc2\xb4t想在内容包装器上使用最大高度，也可以\xc2\xb4t在内容包装器上使用flex-shrink，因为这会通过将页脚移动到内容区域内来搞乱布局，让它们重叠。

\n\n

因此，考虑到这一点，如何创建一个具有动态内容区域的布局，该区域不会垂直传播到无穷大，而是占用页面的剩余空间并在内容包装器内显示提供的内容？

\n\n

\r\n

\r\n

div.main-wrapper {\r\n  height: 200px;\r\n  max-height: 200px;\r\n  min-height: 200px;\r\n  width: 100%;\r\n  min-width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: grey;\r\n}\r\n\r\ndiv.content-wrapper {\r\n  flex: 1 0 auto;\r\n}\r\n\r\ndiv.content {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\ndiv.header,\r\ndiv.footer {\r\n  height: 50px;\r\n  max-height: 50px;\r\n  min-height: 50px;\r\n  background-color: green;\r\n  min-width: 100%;\r\n  width: 100%;\r\n}

\r\n

<div class="main-wrapper">\r\n  <div class="header">FIXED HEADER</div>\r\n  <div class="content-wrapper">\r\n    <div class="content">\r\n      DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n    </div>\r\n  </div>\r\n  <div class="footer">FIXED FOOTER</div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

---

\n\n

编辑：
\n我编辑了我的代码片段，以便更接近我的真正问题，我\xc2\xb4m尝试简单化：正如您在内容包装器中看到的那样，还有另一个组件，让\xc2\xb4s将其视为一个黑盒子，因为此布局应该适用于内容包装器内的每个 div，占据 100% 的高度和宽度。不应该仅仅在内容或内容包装器内添加溢出。目标是拥有内容包装容器，它占用剩余空间并限制包含的内容 div，它应该占据内容包装容器 100% 的高度，并且不会增加主包装容器的高度。正如您在更新的代码片段中看到的那样，由于内容区域拉伸了内容包装器，主包装器明显大于 200 像素。那么如何解决给定参数不使用 content-wrapper 和内容黑盒 div 内的溢出属性的问题。

\n\n

\n

Answer 1

只需申请：

div.content-wrapper {
  flex: 1;
  overflow: auto;
}

解释：

• flex: 1它占用了所有剩余的可用空间。
• overflow: auto;它在需要时触发滚动条。

div.content创建此类布局不需要应用任何内容，也可以将其删除。见简化如下：

div.content-wrapper {
  flex: 1;
  overflow: auto;
}

div.main-wrapper {
  height: 200px;
  display: flex;
  flex-direction: column;
}

div.content-wrapper {
  flex: 1;
  overflow: auto;
  background: lightblue;
}

div.header,
div.footer {
  height: 50px;
  background: lightgreen;
}