I am attempting to ensure that the content inside the left-content div scrolls when the content exceeds the parent height.
However, for some reason, the scrolling content is exceeding its parent's height.
.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;}<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>I have created a fiddle to demo my issue: https://jsfiddle.net/Lqpnacv7/