如何在不裁剪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规范所说的（强调我的）：

'overflow-x'和'overflow-y'的计算值与它们的指定值相同，除了某些与'visible'的组合是不可能的： 如果一个被指定为'visible'而另一个被指定为'scroll'或'自动'，然后'可见'设置为'自动' 。

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

但是，我已经测试过overflow-x设置为visible而overflow-y为hidden ，它仍然将我的overflow-x为auto （这是滚动行为），在Chrome 25中。我相信这可能是一个错误。