我将如何去做这件事，是使侧边栏的位置固定，以确保它停留在很好的地方，而你滚动页面的其余部分。
下面是一个更新的小提琴：https://jsfiddle.net/odukje08/3/
祝你好运！
编辑：我在侧边栏中添加了一些flex属性，使其React更灵敏，并且始终具有正确的高度。

.container {
  display: flex;
  height: 2000px;
  overflow-y: hidden;
}

.left {
  background-color: red;
  width: 20%;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.left-bottom {
  background-color: green;
  height: 100%;
  overflow-y: auto;
  
}
.right {
  flex-grow: 1;
  padding-left: 20%;
}

<div class="container">
  <div class="left">
    <div class="left-top">
    <p>
    This is the top
    </p>
    </div>
    <div class="left-bottom">
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
      <p>
      stuff
      </p>
    </div>
  </div>
  <div class="right">
  <h1>
  hello
  </h1>
  <p>
  this is the right side. You can scroll me too!
  </p>
  </div>
</div>