CSS网格：嵌套网格弄乱了HEIGHT

Question

jsFiddle

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

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

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

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

那里发生了什么？

Answer 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>

Answer 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>