强制显示滚动条，不换行

Question

我在 1 行中有 3 个 div 显示为inline-block. 当包含这 3 个 div 的容器 div 最小化时，我希望出现一个滚动条。
不幸的是，在我的例子中，3 个 div 将被放入下一行，而不是显示滚动条：

只有当所有 3 个 div 都被放到另一行并且没有其他可能性最小化容器 div 后，滚动条才最终出现：

如何始终将 3 个 div 保留在 1 行中，并强制滚动条尽快出现（需要时），而不将 div 放入其他行中？

#container {
  overflow-x: auto;
}

.myclass {
  border: 1px solid;
  display: inline-block;
  width: 300px;
}

<div id="container">
  <div id="div1" class="myclass">
    abc
  </div>
  <div id="div2" class="myclass">
    def
  </div>
  <div id="div3" class="myclass">
    ghi
  </div>
</div>

这是一把小提琴。

Answer 1

将其添加到容器中，这样 div 就不会换行。

#container {
   overflow-x: auto;
   white-space: nowrap;
}

更新的小提琴：https://jsfiddle.net/wea599a1/2/