CSS网格自动调整大小的行内容溢出

Question

我在实现嵌套网格结构时遇到了问题。这是一个简化的例子。正如你所看到的，嵌套结构给出了外部结构的高度，从而在身体之外生长。我想要实现的是使.content__inner元素，并且只有该元素可滚动。其他一切都应该在视口内。我怎样才能做到这一点？

编辑 1： 只是为了澄清，我在身体上使用 100vh，但不想将它设置在容器上。容器应该具有其父级的高度，无论它是什么。

body {
  display: block;
  height: 100vh;
  width: 100%;
  background-color: white;
  margin: 0;
}

.container {
  max-height: 100%;
  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: min-content minmax(min-content, max-content) min-content;
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 0, 0.3);
}

.side {
  grid-area: side;
  background-color: rgba(0, 255, 0, 0.3);
}

.content {
  grid-area: content;
  background-color: rgba(0, 0, 255, 0.3);
}

.overflow {
  overflow: auto;
}

.content-item {
  height: 20px;
  margin-bottom: 5px;
  background-color: white;
}

.footer {
  grid-area: footer;
  background-color: rgba(255, 0, 255, 0.3);
}

<div class="container">
  <div class="header">header</div>
  <div class="side">side</div>
  <div class="content">

    <div class="container container__inner">
      <div class="header header__inner">header</div>
      <div class="side side__inner">side</div>
      <div class="content content__inner overflow">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
      <div class="footer footer__inner">footer</div>
    </div>

  </div>
  <div class="footer">footer</div>
</div>

Answer 1

问题很容易描述，但可能没有简单的解决方案（取决于您的要求）。

其实这个问题从标题就可以看出来：

CSS网格自动调整行内容大小并溢出

自动调整大小的元素不能溢出。它们是自动调整大小的。这意味着元素会根据其内容大小缩小和扩展，而无需溢出。

必须有某种东西可以在容器上设置固定长度。可以跨越的边界，从而触发溢出条件。

来自MDN：*

为了overflow产生效果，块级容器必须设置高度（height或max-height）或white-space设置为nowrap。

您的行高不足以触发溢出：

grid-template-rows: min-content minmax(min-content, max-content) min-content

但这样的事情会起作用：

  grid-template-rows: 10% 80% 10%

不幸的是，上面的代码仅适用于 Chrome。要使布局也适用于 Firefox 和 Edge，请执行以下操作：

  grid-template-rows: 10% minmax(0, 80%) 10%

grid-template-rows: min-content minmax(min-content, max-content) min-content

  grid-template-rows: 10% 80% 10%

基本上，您需要找到某种方法来在溢出行上设置固定的高度限制，以使滚动条发挥作用。

有关上述浏览器差异的说明，请参阅以下帖子：

• 防止内容扩展网格项
• 为什么 minmax(0, 1fr) 适用于长元素，而 1fr 不适用于？