javascript - CSS网格: nesting grids messes up the HEIGHT

Question

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;

那里发生了什么？

Answer 1

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

auto^ref

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

例如，当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>