CSS网格：嵌套网格弄乱了高度

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;}我有一个 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

是与最大内容相同的关键字（如果它是最大值）。作为最小值，它表示占用网格轨道的网格项的最大最小尺寸（由 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>