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

  

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

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

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