React / CSS Layout: make sidebar scrollable

I am quite new to web app development (just hobby). I have the following layout based on flexbox:

• Header row
• Main part consisting of main div and side bar
• Footer row

When the screen is wide enough (>600px), sidebar is shown on the side. The content must be scrollable, so that the whole layout fit to the viewport. How to get it? I probably need to fix the height somehow and add overflow-y: auto. But how to fix height of the sidebar the way the app always fit to viewport?

There is a Codesandbox: https://codesandbox.io/p/sandbox/cpm2d2(please open the result in a separate windows to see result on full screen)

The relevant html layout is:

<div id="app_container"><div id="headerRow"><div id="headerTitleDiv"><h2>PAGE TITLE</h2></div><div id="headerInfoDiv"><h2>..info..</h2></div></div><div id="mainRow"><div id="reactflowDiv">MAIN CONTENT</div><div id="sidebarDiv">          side row 1<br />          side row 2<br />          side row 3<br />          side row 4<br />          ...<br />          side row 33<br /></div></div><div id="footerRow">Footer Row Here</div></div>

and the css file:

html,body {  background: #fff;  padding: 0;  margin: 0;}#app_container {  display: flex;  flex-direction: column;  height: 100vh;}#headerRow {  border-bottom-style: solid;  border-bottom-width: 1px;  display: flex;  flex-direction: row;  flex-wrap: wrap;}#headerTitleDiv {  flex: 1 1 auto;  text-align: center;}#headerInfoDiv {  flex: 0 0 auto;  margin: 8;}#mainRow {  flex: 1 0 300px;  display: flex;  flex-direction: row;  flex-wrap: wrap;}#reactflowDiv {  flex: 3 0 300px;  min-height: 500px;}#sidebarDiv {  min-width: 300px;}@media only screen and (max-width: 601px) {  #reactflowDiv {    border-bottom-style: solid;    border-bottom-width: 1px;  }  #sidebarDiv {    flex: 1 0 auto;  }}@media only screen and (min-width: 602px) {  #reactflowDiv {    border-right-style: solid;    border-right-width: 1px;  }  #sidebarDiv {    flex: 0 0 300px;  }}#footerRow {  border-top-style: solid;  border-top-width: 1px;}

On small screen the sidebar should be on bottom, this works basically.

I tried to put overflow-y: auto; to #sidebarDiv in css, but it does not help.