How do I set two div which are side by side to scroll independently?

I have one main parent div. Within that there are two divs, left and right. I was able to make the left and right div scroll independently. However, within the right div, there are again two divs (1 and 2). I am trying to make 1 and 2 scroll independently. The scroll is happening within the entire right div of the main parent. I am not sure of what is wrong and why the 2 is taking up the whole height of the right div, while it should take only the height of its content. Here, 1 is longer than 2 and should scroll even when 2 stops. I have attached the css for all the divs below.

Main div is the parent of all divs

.main{    display: flex;    font-family: 'Rubik', sans-serif;    font-size: 20px;    width: 100vw;    height: 100%;    background: #f7f7f7;}

Within main div I have left and right div, which are scrolling independently

.left{    flex-grow: 1;    height: 90vh;    position: static;    top: 0;    overflow-y: auto;    overflow-x: hidden;}.right{    flex-grow: 1;    height: 90vh;    position: static;    top: 0;    overflow-y: auto;    overflow-x: hidden;}

Within the right div, I have first and second which are not scrolling independently. First is longer than Second. Second should stop scrolling when its content is over, but it is taking the height of first. I am not sure why. I am trying to make first keep on scrolling when second stops.

.first{    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    width: 900px;    flex: 1 1;}.second{    width: 467px;    background-color: #2b2f3e;    flex: none;}

Can anyone please help me figure out what is wrong with this? thank you

.main {  display: flex;  font-family: 'Rubik', sans-serif;  font-size: 20px;  width: 100vw;  height: 100%;  background: #f7f7f7;}.left {  flex-grow: 1;  height: 90vh;  position: static;  top: 0;  overflow-y: auto;  overflow-x: hidden;  background-color: blue;}.right {  flex-grow: 1;  height: 90vh;  position: static;  top: 0;  overflow-y: auto;  overflow-x: hidden;}.first {  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  width: 900px;  flex: 1 1;  background-color: yellow;}.second {  width: 467px;  background-color: #2b2f3e;  flex: none;}

<div class="main"><div class="left"><h1>Left</h1><p>Data</p></div><div class="right"><h1>Right</h1><div class="first"><h2>First</h2><p>Data</p></div><div class="second"><h2>Second</h2><p>Data</p></div></div></div>