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>

Solution

You had the two child containers .left and .right scrolling vertically on overflow correctly but the two nested divs in the right container were not scrolling independently of the parent .right. To fix that, we can add overflow: auto to both .first and .second and then to align them side by side in a row format give the .right container display: flex.

Also, the .first container was a flexbox and specifically a column layout with flex-direction: column, this column declaration is what was causing the text to overflow out the top of the .right container when I was testing. After removing that and replacing the explicit width's for .first and .second with max-width, things are looking as expected and the containers .first and .second are able to be scrolled independently of their parent .right while the original two containers are still scrollable too. You can also set an explicit height on the .first or .second containers to control when their content should scroll.

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

.left{
    flex-grow: 1;
    height: 90vh;
    position: relative;
    max-width: 20ch; /* Remove this, just for demo */
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #000;
}

.right{
    flex-grow: 1;
    display: flex;
    height: 90vh;
    position: relative;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #000;
}

.first{
    display: flex;
    flex-direction: column;
    max-width: 900px;
    overflow: auto;
}

.second{
    max-width: 467px;
    background-color: #2b2f3e;
    overflow: auto;
}

<div class="main">
   <div class="left">
     <p>Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text</p>
   </div>
   <div class="right">
     <div class="first"><p>Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text<p><p>Some other text</p></div>
     <div class="second">Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text</div>
   </div>
</div>