How to adjust size of parent element when child elements overflow, but keep size when it doesn't?

I have been cracking my head over this. Let's say I want a div to have background color and cover the whole page so I set it's height to 100vh. if I add fixed sized elements inside at first it'd be fine but eventually it'll start to overflow the parent container.

Here's some example code bellow:

<!-- index.html -->
  <div class="parent-box">
    <div class="child-box"> Child box</div>
    <div class="child-box"> Child box</div>
    <div class="child-box"> Child box</div>
    <div class="child-box"> Child box</div>
    <div class="child-box"> Child box</div>
  </div>

// style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent-box {
  background-color: pink;
  width: 20%;
  height: 20vh;
  margin: 2em auto;
}
.child-box {
  background-color: lightblue;
  width: 3em;
  height: 3em;
  margin: auto;
}

Result: code output

Basically, I'm asking how to keep the default size of my parent element the same, while allowing it to grow bigger if it overflows.