如何防止 div 的嵌套网格内容溢出？

Question

我想将一个网格嵌套在另一个网格中，并在嵌套网格的内容中有一个高大的内容框 div。但是，无论我将此内容 div 的 overflow 属性设置为 scroll，内容框都会变大，导致外部网格超出视口。所以视口有一个滚动条。内容 div 的滚动条存在但被禁用。

// html
<div class="outergrid">
  <div class="row1">
  Outer Grid Header
  </div>
  <div class="row2">
    <div class="header">
    Inner Grid Header
    </div>
    <div class="box">
    Tall Box
    </div>
  </div>
</div>

// style scss
*{
  padding: 0px;
  margin: 0px;
}

.outergrid {
  display: grid;
  grid-template-rows: 50px 100%;
  grid-gap: 10px;
  background-color: #0ff;
  div {
    background-color: #afa;
  }
}
.row1{
  grid-row: 1;
}
.row2{
  grid-row: 2;
  display: grid;
  grid-template-rows: 50px 100%;
  grid-gap: 5px;
  .header {
    grid-row: 1;
    background-color: #ffa;
  }
  .contentbox {
     grid-row: 2;
     overflow: scroll;
     .tallcontent {
       background-color: #89f;
       height: 1000px;
     }
  }
}

突出显示问题的屏幕截图

Answer 1

如果我对您的理解正确，那么下面的解决方案（纯 CSS，没有 SCSS）也许可以帮助您。解决方案是对父元素的高度施加约束。

* {
  padding: 0px;
  margin: 0px;
}

.outergrid {
  --grid-gap: 10px;
  display: grid;
  grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
  grid-gap: var(--grid-gap);
  background-color: #0ff;
  max-height: 100vh;
}

.outergrid div {
  background-color: #afa;
}

.row1 {
  grid-row: 1;
}

.row2 {
  --grid-gap: 5px;
  grid-row: 2;
  display: grid;
  max-height: 100%;
  grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
  grid-gap: var(--grid-gap);
}

.row2 .header {
  grid-row: 1;
  background-color: #ffa;
}

.row2 .contentbox {
  grid-row: 2;
  overflow: scroll;
}

.row2 .contentbox .tallcontent {
  background-color: #89f;
  height: 1000px;
}

<div class="outergrid">
  <div class="row1">
    Outer Grid Header
  </div>
  <div class="row2">
    <div class="header">
      Inner Grid Header
    </div>
    <div class="contentbox">
      <div class="tallcontent">
        Tall Content
      </div>
    </div>
  </div>
</div>

如何防止 div 的嵌套网格内容溢出？

How can I prevent overflow of nested grid's content of div?

html

css

css-grid