Flex容器垂直溢出父div

Question

我目前正在尝试创建具有固定页眉和页脚以及动态内容区域的布局，该区域应使用剩余的垂直空间。内容包装器具有一个内容容器，其中可以包含大量数据，因此可以显示滚动条。

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

我既不想在content-wrapper上使用max-height，也不想在content-wrapper上使用flex-shrink，因为这会通过在内容区域内移动页脚来弄乱布局，它们重叠。

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

div.main-wrapper {
  height: 200px;
  max-height: 200px;
  min-height: 200px;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  background: grey;
}

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

div.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}

div.header,
div.footer {
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  background-color: green;
  min-width: 100%;
  width: 100%;
}

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

---

编辑：
我编辑了我的代码片段，以使其更接近我的实际问题，我正尝试简单地解决这一问题：正如您所看到的，在内容包装器内部，还有另一个组件，我们将其视为黑盒，因为此布局应与内容包装器中的每个div一起使用，占用高度和宽度的100％。不应仅在内容或内容包装器内部添加溢出。目标是使内容包装容器占据剩余空间并限制包含的content-div，后者应占据内容包装的100％高度，而不要推高主包装的高度。如您所见，在更新的代码段中，主包装明显大于200px，这是因为内容区域扩展了内容包装。因此，如何使用给定的参数解决问题，而不是在content-wrapper和内容黑盒div中不使用溢出属性。

Answer 1

如果您要在内容中合并更多的列。我强烈建议您为此使用CSS网格。它将允许更多的控制和灵活性。

根据规范。

CSS Grid定义了一个基于二维网格的布局系统。

不同于Flexible Box Layout，它是面向单轴的，它的Grid Layout针对二维布局进行了优化：二维布局要求在两个维度上都要求内容对齐。

---

示例

grid-template-rows: 50px 100px 50px;

您可以将fr单位使用到可用空间的一小部分。这类似于自动。

您甚至可以使用minmax(100px, 1fr);来设置高度的上限和下限。

div.main-wrapper {
  width: 100%;
  display: grid;
  grid-template-rows: 50px 100px 50px;
  background: grey;
}

.content {
  padding: 10px;
  background-color: red;
  overflow-y: auto;
}

.header,
.footer {
  background-color: green;
}

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

Answer 2

只适用：

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

说明：

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

无需在div.content上应用任何内容来创建这种布局，也可以将其删除。参见以下简化：

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;
}

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