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设置为{{ 1}}。

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

nowrap

但是类似的事情会起作用：

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

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

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

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

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: 10% minmax(0, 80%) 10%; /* adjustment */
}

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

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

---

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

• Prevent content from expanding grid items
• How come minmax(0, 1fr) works for long elements while 1fr doesn't?

Answer 2

我想这就是您希望它可滚动显示的意思，这是我的解决方法，

我将max-height更改为100vh，这会将.container类的高度固定为屏幕的高度

我添加了overflow: scroll，以使任何超出高度.container的类都可以滚动

.container {
  max-height: 100vh;
  overflow: scroll;


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

Answer 3

您需要从100vh的布局中保留页眉和页脚的空间，而不是让.content__inner适合100vh……让我向您解释一下，在代码中添加一行。 edited code

我已将以下代码添加到您的代码中

.content__inner { max-height: calc(100vh - 96px); /* added max height */ }

因此，容器具有其父代的高度，无论它是什么，但永远不会达到100vh的高度，并根据您滚动的要求进行修复

Answer 4

您的HTML文件：

<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-mod">
        <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>

您的CSS文件：

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

.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: auto;
  height: calc(100vh - 74px);
}

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

我希望这对您有用。 ：））