html - 强制出现滚动条，不换行

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>

Here is a fiddle .

Answer 1

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

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

更新 fiddle :https://jsfiddle.net/wea599a1/2/