css - 如何在不裁剪 overflow-x 的情况下创建滚动 DIV？

Question

我有一个只能垂直滚动的 DIV。我想让这个 DIV 中的元素水平溢出而不被裁剪。这是预期的效果:

我认为如果我只指定overflow-y:scroll，它只会裁剪垂直溢出。然而，我错了，这才是真正发生的事情:

CSS:

ol {
    border: 1px solid red;
    overflow-y: scroll;
    height: 20em;
    width: 7em;
}

JSFiddle:

http://jsfiddle.net/u6d6W/1/

Answer 1

有趣的问题!我以为您只需将 overflow-x 指定为 visible，但在尝试之后我发现我错了。我从来没有遇到过这种情况，所以我做了一些研究。

这是 W3C spec 的内容说(强调我的):

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

我不知道这个规范背后的基本原理是什么，但显然这不是错误，而是一个功能:)。

但是，我通过将 overflow-x 设置为 visible 并将 overflow-y 设置为 hidden 进行了测试> 它仍然将我的 overflow-x 设置为 auto (这是滚动行为)，在 Chrome 25 中。我相信 this 可能是错误。