I have created a fiddle to demo my issue: https://jsfiddle.net/Lqpnacv7/

I am attempting to ensure that the content inside the ‘left-content’ div scrolls when the content exceeds the parent hight.

However for some reason the scrolling content is exceeding its parents height.

Any help on this is much appreciated

      <div class="main-container">
          <div>Navgation</div>
          <div>Notification Bar</div>
          <div class="content-container">
            <div class="content-left">
              <div class="scrolling-content">Scrolling Content</div>
            </div>
            <div class="content-right">2</div>
          </div>
          <div>Footer</div>
    </div>





  .main-container{
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: red;
    }

.content-container{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
}
.content-container > div{
    flex:1;
}
.content-left{
    overflow: scroll;
}
.scrolling-content{
    height: 1000px;
    background-color: yellow;
}