html - 如何使一个 div 垂直滚动，而另一个不具有两个 inline-block div？

Question

我的网站上有两个内联块 div，当浏览器垂直调整大小时，我想让右侧的 div 获得一个垂直滚动条，但只有右侧的 div（不是左侧的）。

我在 jsfiddle 上创建了一个非常简化的网站版本。

https://jsfiddle.net/nky2buhr/7/

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

#container {
  height: 300px;
}

#left {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  height: 150px;
  width: 200px;
  background-color: red;
}

#right {
  overflow-y: auto;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  height: 200px;
  width: 200px;
  background-color: blue;
}

如果你垂直调整结果窗口的大小，你会看到一个滚动条出现，但滚动条出现在整个文档中，而不仅仅是右侧的 div。我希望看到的情况是垂直滚动条仅出现在右侧 div 中。

我怎样才能做到这一点？

标签： htmlcss