How to make flexbox nested columns vertical scroll independently inside nested flex container

Question

I'm trying to create the following layout:

my html structure is as following:

<div id="root">
  <div class="header">
    HEADER COMPONENT
  </div>
  <div class="main-content">
    <div class="main-content-header"> 
       MAIN CONTENT HEADER 
    </div>

    <div class="section-wrapper">
      <div class="left-section">
        <p> indenpent scroll</p>
      </div>

      <div class="right-section">
        <p> indenpent scroll</p>  
      </div>
    </div>
  </div>
</div>

i've managed to create the layout I think quite correctly with flexbox, with the following css:

#root {
  background-color: #eceff1;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  border:5px dotted orange
}

.header{
  background-color: #282c34;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-content{
  background-color: darkcyan;
  display: flex;
  flex-direction: column;
  flex:1;
}

.main-content-header{
    flex: 0 1;
    flex-direction:row;
    justify-content: center;
    background-color: #f54343;
    padding: 10px;
    color: white;

}

.section-wrapper{
  display:flex;
  flex-direction: row;
  flex:1;
  border: 3px solid purple
}

.left-section{
  background-color:yellow
}

.right-section{
  background-color:aqua
}

the issue im facing is with css and stying the two inner 'section's which are components as well.

when a list of long text exists that layout doesnt shrink and show the scrollbar

i've read about the fix with

min-height:0

but it doesn't seem to work with what i've done.

I've attached a codepen with what I've described

https://codepen.io/ronenil/pen/XWWXmaq

thanks for the helpers !