显示内容溢出：内联块;为什么以及如何？

Question

进行此设置：

<div>
    <label>...</label><br />
    <!-- repeat several times -->
</div>

div {
    display:inline-block;
    overflow:auto;

    max-height:3em; /* short enough to cause overflow */
    /* or, in Chrome, this works too: */
    padding:1ex;
}

将导致Chrome和Firefox生成水平滚动条：

JSFiddle

Opera是Opera Presto，而不是Opera Blink。太糟糕了，它被抛弃了。

无论如何，为什么会发生这种情况，如果我需要max-height（因此自动溢出）和padding，我将如何摆脱水平滚动条？

P.S。我正在使用XP机器（公司限制），如果这很重要。

PS＃2进一步测试表明，在margin上禁用<label>会在Firefox中输出水平滚动条，但内容将粗略地减少到3个字符长度（最短的标签） ）减少约2个字符（滚动条的宽度）。

---

更新＃2：

如果人们感到含糊不清：

为什么容器<div> 缩小到其子项的最短长度（在这种情况下，3个字符）扩展不超过Chrome和Firefox中的内容宽度，不包括滚动条，让长孩子溢出？ 在任何地方都没有长度信息，所以这里的逻辑是什么？我故意添加“零”，所以第一个孩子不是最短的孩子，但仍然得到相同的结果。

Opera Presto似乎按照我的预期工作，但这似乎不是事实上的标准。

我怎么能要求<div>扩展到应有的宽度，同时仍然保持最大高度并自动滚动？

---

更新＃1：

滚动条的直接原因当然是内容水平溢出，所以如果我粗暴地将overflow-x:hidden应用于<div>，结果就是这样：

---

更新＃3：

感谢@SergiyT。，事实证明Chrome和Firefox处理滚动条的方式，而不是最短的孩子：

JSFiddle

我不确定这是否“正确”（内容在最长的孩子出现之前已经溢出），但这似乎是一个死胡同。

Answer 1

也许这就是浏览器如何使用滚动条。它看起来像歌剧（也可能是IE）考虑宽度/高度没有滚动条，但Firefox和Chrome考虑滚动条。在你的屏幕截图中，Opera的div宽度大于Firefox和Chrome。

Answer 2

这可能对您有所帮助

div.listbox {    
    overflow-x: hidden;
}

Answer 3

尝试

div.listbox{
...
vertical-align: bottom;
}