フレックスボックス (Flexbox) レイアウトでサイドバーと本文を別々にスクロールできるようにする

<div class="container">
  <div class="left">
    Left<br>Left<br>Left<br>Left<br>Left<br>Left<br>
    Left<br>Left<br>Left<br>Left<br>Left<br>Left<br>
    Left<br>Left<br>Left<br>Left<br>Left<br>Left<br>
  </div>
  <div class="right">
    Right<br>Right<br>Right<br>Right<br>Right<br>
    Right<br>Right<br>Right<br>Right<br>Right<br>
    Right<br>Right<br>Right<br>Right<br>Right<br>
  </div>
</div>

body {
  margin: 0;
  height: 100vh;
}

.container {
  display: flex;
  height: 100%;
}

.left {
  width: 100px;
  background: #f9c;
  overflow-y: auto;
}

.right {
  flex: 1;
  background: #9cf;
  overflow-y: auto;
}