CSS nested grid layout overflow issue

Question

I have a grid within a grid. I am having issues where I can't get the child div in this example to resize to fit the grid. I have tried to create a simple example of what I am trying to do. In reality I am building a React app where I am using grid areas and have many more parent containers and a lot more child divs. I want everything to have 2 columns so I don't want to autofit the amount of columns. I just want the children to resize to fit the parent-grid. I want the entire thing to fit to the screen. Everything just keeps getting pushed down and nothing I change seems to fix things.

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

any help would be really appreciated :)

I have tried making all the child divs 100% height and using 1fr for my grid layout but it the grid still seems to overflow.

.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

* {
  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;
}

I figured it out by using pretty much with the code above.