CSS网格的动态分配的行高随着内容的增长而扩展

Question

类似于this question，我在使用CSS网格创建带有固定页眉和页脚的布局（包含中间行）的过程中遇到困难，该中间行应使用.static或{{1}的剩余空间}动态容器。因此，在这种情况下，它们两个都应具有完整的.dynamic 200px。减去40px（页眉+页脚的2x 20px），内容的剩余空间应为160px。在示例中可以看到，左侧的红色参考div明显小于div容器的整个“三明治”。 height div元素很大，将拉伸整个div容器。 我要禁止这样做！

以下是我必须满足的一些附加条件：

1. 整个布局应该是动态的，因此以后的.dynamic div将不会具有静态高度，但会填充给定高度的100％。因此将仅使用.wrapper，因为这也会占用高度的100％。带有dynamic的展示柜就可以显示它甚至不能在固定高度下工作。
2. 静态或动态都不能与溢出一起创建滚动条或隐藏的溢出内容。它应该仅将.static和.header之间的动态区域限制为一个高度。
3. 包含的.footer容器将自身扩展到100％的宽度，应视为一种黑匣子：每个组件都应能够插入此处。内容将始终使用高度的100％，并且不应拉伸周围的父div。如果内容的高度比.content容器的动态分配空间高，则内容将单独包含一个滚动条

如何使用给定的描述解决此问题？

请参见提供的示例，并根据需要随时对其进行调整！

.dynamic

.wrapper {
  display: flex;
  flex-direction: row;
  height: 200px;
  max-height: 200px;
  width: 100%;
}

.measurement {
  height: 200px;
  max-height: 200px;
  min-height: 200px;
  min-width: 3px;
  background-color: red;
  border: 2px solid blue;
  padding: 2px;
  margin: 1px;
}

.static,
.dynamic {
  display: grid;
  grid-template-rows: 20px 1fr 20px;
  width: 50%;
  border: 2px solid blue;
  padding: 2px;
  margin: 1px;
}

.static {
  height: 200px;
  max-height: 200px;
  /*should NOT have an overflow/scrollbar but fit to the remaining space*/
}

.dynamic {
  height: 100%;
  max-height: 100%;
  /*should NOT have an overflow/scrollbar but fit to the remaining space*/
}

.content {
  height: 100%;
  width: 100%;
  overflow: auto;
  /* Blackbox like content, always expands to 100% width and height */
  /* could contain content that is larger than the dynamic-height div and will get scrollbar then */
}

.fixed-height {
  background-color: green;
}

编辑
如下图所示，“测试”和“底部”文本超出了蓝色边框。我不是在边界和红色参考之间的几个像素差异，而是在关注底部边界的溢出。

这是预期的行为：内容区域内应该有一个滚动条，动态div内没有溢出和滚动条

Answer 1

您需要将div.content与div.dynamic-height合并，并将max-height: 100%属性设置为您的.dynamic-height类。

.content不需要高度，它由网格行的定义来设置。

.wrapper {
  display: flex;
  flex-direction: row;
  height: 200px;
  max-height: 200px;
  width: 100%;
}

.measurement {
  height: 200px;
  max-height: 200px;
  min-height: 200px;
  min-width: 3px;
  background-color: red;
  border: 2px solid blue;
  padding: 2px;
  margin: 1px;
}

.static,
.dynamic {
  display: grid;
  grid-template-rows: 20px 1fr 20px;
  width: 50%;
  border: 2px solid blue;
  padding: 2px;
  margin: 1px;
}

.static {
  height: 200px;
  max-height: 200px;
  /*should NOT have an overflow/scrollbar but fit to the remaining space*/
}

.dynamic {
  height: 100%;
  max-height: 100%;
  /*should NOT have an overflow/scrollbar but fit to the remaining space*/
}

.content {
  width: 100%;
  overflow: auto;
  /* Blackbox like content, always expands to 100% width and height */
  /* could contain content that is larger than the dynamic-height div and will get scrollbar then */
}

.fixed-height {
  background-color: green;
}
.dynamic-height {
  max-height: 100%;
}

<div class="wrapper">
  <div class="measurement"></div>
  <div class="static">
    <div class="fixed-height">TOP</div>
    <div class="dynamic-height content">
        TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST
    </div>
    <div class="fixed-height">BOTTOM</div>
  </div>
  <div class="dynamic">
    <div class="fixed-height">TOP</div>
    <div class="content dynamic-height">
        TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST
    </div>
    <div class="fixed-height">BOTTOM</div>
  </div>
</div>