CSS嵌套网格布局溢出问题

Question

我有一个网格内的网格。我遇到问题，无法让本示例中的子 div 调整大小以适应网格。我试图创建一个简单的例子来说明我正在尝试做的事情。实际上，我正在构建一个 React 应用程序，其中使用网格区域，并且有更多的父容器和更多的子 div。我希望所有内容都有 2 列，因此我不想自动调整列数。我只想让孩子们调整大小以适应父网格。我希望整个内容都适合屏幕。一切都在不断被推倒，我所做的任何改变似乎都无法解决问题。

https://codepen.io/amy543/pen/ExMNZgV

任何帮助将非常感激:)

我尝试将所有子 div 设置为 100% 高度，并使用 1fr 作为网格布局，但网格似乎仍然溢出。

.grid {
  display: grid;
  height: 100vh;
  width: 100vw;
  max-height: 100vh;
  max-width: 100vw;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 20px;
  background-color: lightblue;
  grid-template-areas: "area1 area2 area2" "area3 area4 .";
}

.parent-container {
  display: grid;
  flex-direction: column;
  background-color: green;
}

.parent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 10px;
  background-color: rgb(66, 77, 77);
}

.child {
  display: grid;
  background-color: red;
  padding: 20px;
}

<div class="grid">
  <div class="parent-container" style="grid-area: area1;">
    <h2>Grid1 Title </h2>
    <div class="parent-grid">
      <div class="child">
        <h2>ParentGrid1</h2>
        <p>Child1</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid1</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <div class="parent-container" style="grid-area: area2;">
    <h2>Grid2 Title </h2>
    <div class="parent-grid">
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child1</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <div class="parent-container" style="grid-area: area3;">
    <h2>Grid3 Title </h2>
    <div class="parent-grid">
      <div class="child">
        <h2>ParentGrid3</h2>
        <p>Child1</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid3</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <div class="parent-container" style="grid-area: area4;">
    <h2>Grid4 Title </h2>
    <div class="parent-grid">
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child1</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

任何与百分比和比例不成比例的高度或宽度都会导致问题。 只需删除这些行

.grid {
/* height: 100vh; */
/* width: 100vw; */
/* max-height: 100vh; */
/* max-width: 100vw;*/

Answer 2

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html, body {
    height: 100%; 
    margin: 0;
    padding: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: auto;
  gap: 5px;
  padding: 20px;
  background-color: lightblue;
  grid-template-areas:
    "area1 area2 area2"
    "area3 area4 .";
  height: 100%;
}

.parent-container {
  display: flex;
  flex-direction: column;
  background-color: green;
}

.parent-grid {
  display: grid;
  gap: 5px;
  padding: 10px;
  background-color: rgb(66, 77, 77);
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  flex-grow: 1;
}

.child {
  display: grid;
  background-color: red;
  height: 100%;
}
h2 ,p{
  font-size: 4vh;
}

我通过使用上面的代码来解决这个问题。