如何在不修剪overflow-x的情況下創建滾動DIV？

我有一個只能垂直滾動的DIV。我想這個DIV內部的元素水平溢出而不會被裁剪。這是預期的效果：如何在不修剪overflow-x的情況下創建滾動DIV？

enter image description here

我想，如果我只指定overflow-y:scroll，也只是裁剪垂直溢出。然而，我錯了，這是真正發生的事情：

enter image description here

CSS：

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

的jsfiddle：

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

2013-03-15 Pwner

因爲默認值是滾動的，所以你必須指定overflow-x：hidden。 – 2013-03-15 17:46:40

@Kyle：但是這會隱藏它，不允許它顯示在滾動條的前面。對？ – 2013-03-15 17:48:32

@Adrift：有兩個溢出屬性：overflow-x和overflow-y。我只指定了overflow-y，但由於某種原因overflow-x被設置爲隱藏... – Pwner 2013-03-15 17:50:20

有趣的問題！我以爲你只需要指定overflow-x爲visible，但嘗試後我發現我錯了。我從來沒有遇到過這樣的情況，所以我做了一些研究。

這裏是什麼W3C spec說（重點煤礦）：

「溢出-X」和「溢出-Y」的計算值是相同的他們指定的值，除了一些組合「可見'是不可能的：如果一個被指定爲'可見'，另一個'滾動'或'自動'，則'可見'被設置爲'自動'。

我不知道什麼是背後規範的理由，但顯然這不是一個錯誤，而是一個功能:)。

不過，我已經通過設置overflow-x到visible和overflow-y到hidden測試，它仍然將我overflow-x到auto（這是滾動行爲），在Chrome 25，我相信這可能是一個錯誤。

2013-03-15 18:22:32 Sunyatasattva

+1用於W3C規範的研究工作和引用。 – 2013-03-15 18:27:11

回答