溢出y影響容器內元素的可見性

Question

我有一個div，其中一些內容具有負相對位置。我希望跨度在x軸的容器上方顯示，但溢出-y正在剪裁我的文本。我需要它有一個垂直滾動。

我不想要水平滾動。 我想要一個垂直滾動。 文本應該出現在容器上方。

我該怎麼做？

<div id="test"> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
</div>​ 


#test { 
    height:100px; 
    width:100px; 
    clip: rect(auto,auto,auto,auto); 
    overflow-y: auto; 
} 
.row { 
    position:relative; 
    left:-11px; 
    display: block; 
}​ 

http://jsfiddle.net/jZrER/。嘗試刪除溢出-y看看會發生什麼。 我需要這樣的東西：http://jsfiddle.net/e7MXD/但與垂直滾動。

這就是我想要實現的： 藍色部分是垂直滾動條（我沒有時間繪製它）。

Answer 1

我希望有人證明我錯了這一點。我不認爲它可能在CSS中使用溢出。我用overflow-x：visible ;,看起來滾動條有一個內置的裁剪功能（畢竟，你不希望內容在滾動條上下）。但是，可能有一個聰明的方法來複制它。

編輯：我的這個「證據」是，如果你把

overflow-x: visible; !important 
overflow-y: auto; 

它不會增加捲軸，但是如果你刪除!important它。

Answer 2

不是使用overflow-x: auto;一樣好，甚至更好，但同時忽略和使用overflow: auto。

Answer 3

對你想要達到的目標仍有點困惑。儘管我玩過這個。

http://jsfiddle.net/e7MXD/1/

<div id="test"> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
</div>​​​​ 

#test { 

    margin-left:50px; 
    margin-top:50px; 
    border:1px solid black; 
    height:100px; 
    width:100px; 
} 

.span-container { 
    margin-left:50px; 
    margin-top:50px;  
overflow-y:scroll; 
overflow-x:visible; 
height:100px; 
    width:200px 
} 

.row { 
    position:relative; 
    left:-11px; 
    display: block; 
}​