Flex容器垂直溢出父div

Question

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

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

我不想在内容包装器上使用最大高度，也不能在内容包装器上使用 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>

---

编辑：
我编辑了我的 sn-p 以便更接近我的实际问题，我正在尝试简单化：正如您在内容包装器中看到的那样，还有另一个组件，让我们将它视为一个黑盒子，因为布局应该与内容包装器中的每个 div 一起使用，它占用 100% 的高度和宽度。不应该只是在内容或内容包装器中添加溢出。目标是拥有内容包装容器，它占用剩余空间并限制包含的内容 div，它应该占据内容包装的 100% 高度，而不是推动主包装的高度。正如您在更新后的 sn-p 中看到的，由于内容区域拉伸了内容包装器，主包装器明显大于 200 像素。那么如何解决给定参数不使用 content-wrapper 和 content blackbox div 中的溢出属性的问题。

Answer 1

如果您要在内容中加入更多的分栏。我强烈建议您为此使用 css 网格。它将允许更多的控制和灵活性。

按照规范。

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

与面向单轴的Flexible Box 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>