随着内容的增长，css网格的动态分配行高度会变得越来越大

Question

与this question类似，我正在努力使用CSS网格创建一个包含中间行的固定页眉和页脚的布局，应使用.static或.dynamic动态容器的剩余空间。所以在这种情况下，他们两个都应该有一个200px的完整height。减去40px（标题+页脚的2x 20px），内容的剩余空间应为160px。正如您在示例中所看到的，左侧的红色参考div明显小于div容器的整个“三明治”。 .dynamic div元素很大，会拉伸整个div容器。我想禁止这个！

以下是我必须满足的一些额外条件：

1. 整个布局应该是动态的，所以.wrapper div以后不会有静态高度，但会填充给定高度的100％。因此，将使用onlydynamic，因为这也使用100％的高度。与.static的展示就是为了表明它甚至不能在固定的高度工作。
2. 静态和动态都不应该与溢出一起使用来创建滚动条或隐藏的溢出内容。它应该将.header和.footer之间的动态区域限制在一个高度。
3. 包含.content的容器将自身扩展到100％宽度，并且应该作为一种黑盒子进行处理：每个组件都应该能够插入到这里。内容将始终使用100％的高度，不应拉伸环境父div。如果内容的高度比.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 class="wrapper">
  <div class="measurement"></div>
  <div class="static">
    <div class="fixed-height">TOP</div>
    <div class="dynamic-height">
      <div class="content">
        TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST
      </div>
    </div>
    <div class="fixed-height">BOTTOM</div>
  </div>
  <div class="dynamic">
    <div class="fixed-height">TOP</div>
    <div class="dynamic-height">
      <div class="content">
        TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST
      </div>
    </div>
    <div class="fixed-height">BOTTOM</div>
  </div>
</div>

编辑 如下图所示，TEST和BOTTOM文本超出了蓝色边框。我不是关于边框和红色参考之间的几个像素差异，但我担心底部边框溢出。

这是预期的行为：内容区域内应该有一个滚动条，没有溢出，动态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>