强制滚动条出现，没有换行符

Question

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

只有在将所有3个div放到另一行之后，没有其他可能性来最小化容器div，滚动条最终会出现：

如何将3个div保持为1行并强制滚动条尽快出现（如果需要），而不将div放入其他行？

＆＃13;

＆＃13;

#container {
  overflow-x: auto;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Here is a fiddle

Answer 1

将此添加到容器中，以便div不会换行。

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

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

Answer 2

在容器上放一个宽度。

#container {
  overflow-x: auto;
  width: 300px;
}

现在一起：

#container {
  overflow-x: auto;
  width: 300px;
}

.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>