How to make child div's overflowed content scroll along with the parent div

Question

I am trying to have a child div scroll along with the parent div as opposed to creating its own scroll. Right now the child-2 div overflows with content and it creates its own scrollbar. What I want is the overflown div to expand the parent div like it normally should. Instead, for some reason, the overflown div (child-2) expands past the border of the parent div. This has something to do with using height: 100%. When I remove this, the scroll works as it should but then, the parent div does not expand to the full height of the page. Note: Im using typescript on nodeJS and this is an HTML/CSS representation of my situation which is actually coded in tsx

#parent {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto; // tried doing this
}

#child-1 {
  display: flex;
  flex-direction: column;
  height: auto;
}

#child-2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

<div id="parent">
  <div id="child-1">Nav Bar</div>
  <div id="child-2">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
    ....
  </div>
</div>