CSS 网格：免费使用的内容 space 但在更大时滚动

Question

我第一次与 CSS Grid Layouts 合作，他们很棒。但是，现在我无法控制其中一个网格单元。

我想要的是有一个元素占用现有的免费 space 并且不再，当内容变得太大时滚动。我的理解是 1fr 的网格大小在计算完其他所有内容后占用了统一数量的可用 space。我尝试了各种尺寸，例如 minmax(auto, 1fr) 但无济于事 - 1fr 似乎会扩展以适应我不想要的内容。像 100px 这样设置最大尺寸也不好，因为我希望尺寸由网格中的其他元素决定。

示例如下：

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
}

.container>div {
  border: 1px solid blue;
  border-radius: 5px;
}

.left {
  grid-column: 1;
  grid-row: 1/4;
}

.header {
  grid-column: 2;
  grid-row: 1;
}

.problem-child {
  grid-column: 2;
  grid-row: 2;
  overflow-y: scroll;
}

.footer {
  grid-column: 2;
  grid-row: 3;
}

<div class="container">
  <div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
  <div class="header">column header</div>
  <div class="problem-child">problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
  <div class="footer">column footer</div>
</div>

我可以使用什么网格声明（如果有）让 "problem child" 在溢出时滚动而不是扩展？

Answer 1

您可以使用 max-height:100%; 和 min-height 来保留足够的高度以显示适当的滚动条。（firefox 可以，chrome暂时不会)

.container {
  display: grid;
  grid-template-rows: auto minmax(1fr, 25vh) auto;
  grid-template-columns: 1fr 1fr;
}

.container>div {
  border: 1px solid blue;
  border-radius: 5px;
}

.left {
  grid-column: 1;
  grid-row: 1/4;
}

.header {
  grid-column: 2;
  grid-row: 1;
}

.problem-child {
  grid-column: 2;
  grid-row: 2;
  min-height:4em;
  max-height:100%;
  overflow-y: auto;
}

.footer {
  grid-column: 2;
  grid-row: 3;
}

<div class="container">
  <div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
  <div class="header">column header</div>
  <div class="problem-child">problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
  <div class="footer">column footer</div>
</div>

作为解决方法，您还可以在 absolute 位置使用额外的包装器将其从流程中取出并将其调整为行的高度：（这两种情况都需要最小 -需要时正确显示滚动条的高度）

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
}

.container>div {
  border: 1px solid blue;
  border-radius: 5px;
}

.left {
  grid-column: 1;
  grid-row: 1/4;
}

.header {
  grid-column: 2;
  grid-row: 1;
}

.problem-child {
  grid-column: 2;
  grid-row: 2;
  position:relative;
  min-height:4em;
  }

.problem-child >div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  max-height:100%;
  overflow:auto ;
}

.footer {
  grid-column: 2;
  grid-row: 3;
}

<div class="container">
  <div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
  <div class="header">column header</div>
  <div class="problem-child">
    <div>problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
  </div>
  <div class="footer">column footer</div>
</div>

Answer 2

在@G-Cyr 的解决方案之上添加。至少应该有一个绝对定位的元素才能使 max-height 起作用。设置容器绝对定位。

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;
  position: absolute;
}

.container>div {
  border: 1px solid blue;
  border-radius: 5px;
}

.left {
  grid-column: 1;
  grid-row: 1/4;
}

.header {
  grid-column: 2;
  grid-row: 1;
}

.problem-child {
  grid-column: 2;
  grid-row: 2;
  max-height: 100%;
  overflow-y: auto;
}

.footer {
  grid-column: 2;
  grid-row: 3;
}

<div class="container">
  <div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
  <div class="header">column header</div>
  <div class="problem-child">problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
  <div class="footer">column footer</div>
</div>

Answer 3

有一个更优雅的解决方案，它使用视口高度单位 (vh)。只需将 100vh 应用于您的容器：

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  height: 100vh; /* <- does the trick */
}

.container>div {
  border: 1px solid blue;
  border-radius: 5px;
}

.left {
  grid-column: 1;
  grid-row: 1/4;
}

.header {
  grid-column: 2;
  grid-row: 1;
}

.problem-child {
  grid-column: 2;
  grid-row: 2;
  overflow-y: scroll;
}

.footer {
  grid-column: 2;
  grid-row: 3;
}

body {
  margin: 0; /* fixes Whosebug's markup */
}

<div class="container">
  <div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
  <div class="header">column header</div>
  <div class="problem-child">problem child:<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique felis eros, et luctus turpis pellentesque nec. Nunc gravida est quis vestibulum tristique. Maecenas consectetur cursus pulvinar. Aenean quis diam sollicitudin nisi ullamcorper consectetur. Nullam dapibus eleifend sollicitudin. Donec ut pulvinar erat, quis suscipit urna. Donec at turpis nunc. Sed diam lectus, tincidunt vel tellus eu, consectetur rhoncus urna. Fusce tempus lectus tellus, sagittis laoreet arcu sagittis vitae. Phasellus varius orci accumsan orci vulputate semper. Maecenas mauris tortor, congue sit amet volutpat pretium, tincidunt et ligula. Donec convallis bibendum nunc at gravida. Pellentesque suscipit, nisl nec commodo tincidunt, metus nibh posuere diam, et finibus nulla mauris scelerisque sem. Maecenas fringilla ullamcorper consectetur.

Nullam non purus vitae nisl scelerisque molestie at et nibh. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum bibendum mattis dignissim. Praesent rutrum ultrices mauris, in maximus orci suscipit iaculis. Ut non neque feugiat, vestibulum massa sed, malesuada nulla. Phasellus eu vehicula odio. Proin vulputate, purus ac posuere pharetra, velit ipsum sollicitudin tellus, ut fermentum sapien risus eu lorem. Nullam viverra mollis finibus. Curabitur cursus lobortis dapibus. Cras aliquet dignissim diam, eu consectetur risus pretium a.

Phasellus consectetur vel tellus et dignissim. Quisque sit amet porta sem, et sagittis sem. Vestibulum blandit tellus enim, sed convallis lectus semper eget. Nunc varius dignissim nunc. Ut ac fringilla justo. Aenean non ex lacus. Mauris pretium egestas facilisis.

Fusce imperdiet turpis vitae tortor tristique, vitae pulvinar erat cursus. Aliquam blandit justo rutrum, efficitur leo vitae, fringilla enim. Cras facilisis dapibus mattis. Duis quis accumsan ipsum. Curabitur consectetur nisi vel mauris tincidunt, sed finibus nisi faucibus. Curabitur efficitur nulla at turpis vehicula congue. Aenean quis nulla id massa elementum commodo quis ut risus. Aliquam congue metus vitae mi dictum aliquet. Nulla facilisi. Donec auctor nisl non turpis scelerisque, ut vestibulum mauris malesuada. Mauris vulputate ut mi vitae congue. Nam ac nulla in neque semper laoreet at in metus.

Cras bibendum, magna ut convallis consectetur, lacus nunc luctus metus, a faucibus quam leo et dui. Nam non sagittis lacus. In leo dui, euismod a tellus eu, volutpat cursus libero. Praesent suscipit mollis turpis, eu imperdiet lorem imperdiet in. Suspendisse potenti. Ut bibendum semper ante, at blandit enim feugiat ut. Nullam eu vehicula lorem. Curabitur maximus ipsum ex, eget mattis urna consectetur id.</div>
  <div class="footer">column footer</div>
</div>

Answer 4

如果您在 problem-child 中定义另一个网格，那么它也不会正确呈现。您必须将 overflow: auto 属性从任何 parent-grid 下推到 children。检查给定的代码笔：

body {
  height: 100vh;  
  display: grid;
  grid-template-rows: 30px 1fr 20px;
  margin: 0;
}
.header {
  background: green;
}
.footer {
  background: magenta;
}
.page {
  overflow: auto;
}
.container{
  height: 100%;
  display: grid;
  grid-template-rows: 30px 1fr 1fr 30px;
}

.fill-content {
  background: red;
  overflow: auto;
}

.fix-content {
  background: yellow;  
}

.large {
  background: blue;
  width: 100%;
  height: 150px;
}

<div class="header">Page HEader
</div>
<div class="page"> 
<div class="container">
  <div class="fix-content"></div>
  <div class="fill-content">
    <div class="large">fill content 1 by vertical space or scroll it (red layer is filled, blue makes it scrolling)</div>
  </div>
  <div class="fill-content">
    <div class="large">fill content 2 by vertical space or scroll it (red layer is filled, blue makes it scrolling)</div>
  </div>
  <div class="fix-content"></div>
</div>
</div>
<div class="footer">Page Footer</div>

CSS 网格：免费使用的内容 space 但在更大时滚动

CSS grid: content to use free space but scroll when bigger

css

styling

grid-layout

css-grid