CSS网格：嵌套网格弄乱了高度[重复]答案

【问题标题】：CSS grid: nesting grids messes up the HEIGHT [duplicate]CSS网格：嵌套网格弄乱了高度[重复]
【发布时间】：2020-07-01 05:03:36
【问题描述】：

jsFiddle

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
  /*      display: grid;
           grid-template-columns: 1fr 1fr;
           grid-gap: 10px;
        */
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

.component-container .grid-container-1 .grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid darkblue;
  overflow: auto;
}

.component-container .grid-container-1 .grid-header {
  grid-column: 1/span 3;
  grid-row: 1;
}

.component-container .grid-container-1 .grid-nav {
  grid-column: 1;
  grid-row: 2/span 1;
}

.component-container .grid-container-1 .grid-content-left {
  grid-column: 2;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-content-right {
  grid-column: 3;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-footer {
  grid-column: 1/span 3;
  grid-row: 3;
}

.component-container .grid-container-2 {
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #b1f3cc;
}

button {
  margin: 2px;
  width: 500px;
}

<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-nav">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-left">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-right">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-footer">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
  </div>

  <div class="grid-container-2">
    Lorem Ipsum
  </div>
</div>

我有一段 SCSS，它使用网格来设置我的页面样式。请注意垂直滚动条。

现在，我想在这个表格的右侧再添加一个 div。所以我在这个 div 之后添加了一个 div，并将 display:grid 添加到这两个 div 的容器中。结果，这些滚动条消失了，因为它们的 div 的高度被弄乱了。

请从 SCSS 中取消注释第 9-11 行。

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;

那里发生了什么？

【问题讨论】：

没什么，因为滚动条是根据元素的实际高度出现的。所以消失是正常的。
只需将min-height: 0 添加到.grid-container-1。 jsfiddle.net/3n2prsqc

标签： javascript html css css-grid

【解决方案1】：

该行为可能与隐式创建的网格行中auto关键字的相关计算结果。

auto^ref

是一个关键字，如果它是最大值，则它与最大内容相同。作为最小值，它表示占据网格轨道的网格项的最大最小尺寸（由 min-width/min-height 指定）。

例如，当grid-auto-rows（或grid-template-rows）属性设置为100%，如下图所示，问题就解决了：

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 100%;
}

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 100%;
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

.component-container .grid-container-1 .grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid darkblue;
  overflow: auto;
}

.component-container .grid-container-1 .grid-header {
  grid-column: 1/span 3;
  grid-row: 1;
}

.component-container .grid-container-1 .grid-nav {
  grid-column: 1;
  grid-row: 2/span 1;
}

.component-container .grid-container-1 .grid-content-left {
  grid-column: 2;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-content-right {
  grid-column: 3;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-footer {
  grid-column: 1/span 3;
  grid-row: 3;
}

.component-container .grid-container-2 {
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #b1f3cc;
}

button {
  margin: 2px;
  width: 500px;
}

<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-nav">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-left">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-right">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-footer">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
  </div>

  <div class="grid-container-2">
    Lorem Ipsum
  </div>
</div>

【讨论】：

行得通，谢谢！因此，如果我理解正确，我只指定列的外部网格（当然）有一行，这是“自动”，因为它没有被指定。

【解决方案2】：

把你的 SCSS 变成 CSS。

“问题”是您的网格对高度没有限制，因此它会根据需要渲染。如果你禁用overflow: hidden;

，你会看到

所以只需添加：grid-template-rows: 100%; 网格将坚持 div 的高度而不溢出。

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  grid-gap: 10px;
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

.component-container .grid-container-1 .grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid darkblue;
  overflow: auto;
}

.component-container .grid-container-1 .grid-header {
  grid-column: 1 / span 3;
  grid-row: 1;
}

.component-container .grid-container-1 .grid-nav {
  grid-column: 1;
  grid-row: 2 / span 1;
}

.component-container .grid-container-1 .grid-content-left {
  grid-column: 2;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-content-right {
  grid-column: 3;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-footer {
  grid-column: 1 / span 3;
  grid-row: 3;
}

.component-container .grid-container-2 {
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #b1f3cc;
}

button {
  margin: 2px;
  width: 500px;
}

<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-nav">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-left">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-right">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-footer">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
  </div>

  <div class="grid-container-2">
    Lorem Ipsum
  </div>
</div>

【讨论】：

谢谢托马斯，这行得通！我接受了 Sanriot 的回答，因为那是第一个回答。