Match scrollable column height

Question

I want to make sure that .right has at most the same height as the contents of .left, so it becomes scrollable. Currently it doesn't scroll, because .right takes up more vertical space for the rows.

<div class="main">
  <div class="left">
    <div class="left-1"></div>
    <div class="left-2"></div>
  </div>
  <div class="right">
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
    <div class="row">row</div>
  </div>
</div>

.main {
  display: flex;
}

.left {
  flex: 0 0 300px;
  background-color: #a0ffff;
}

.right {
  flex: 1 0 0;
  background-color: #ffa0ff;
  overflow: auto;
}

.left-1, .left-2 {
  height: 200px;
  margin: 20px;
  background-color: white;
}

.row {
  height: 40px;
  margin: 20px;
  background-color: red;
}

Is there a simple, modern solution to this?