Question

I have a div with some content that has a negative position relative. I want the span’s to appear above its container in the x-axis, but overflow-y is clipping my text. I need it to have a vertical scroller.

I don’t want an horizontal scroll.
I want a vertical scroll.
The text should appear above the container.

How Can I do that?

<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/ . Try removing overflow-y to see what happens.
I need something like this: http://jsfiddle.net/e7MXD/ but with vertical scroll.

This is what I am trying to accomplish:
The blue part is vertical scroller (I have no time to draw it).

Answer 1

I hope someone proves me wrong on this. I don’t think it’s possibly using overflow in css. I used overflow-x:visible;, and it seems the scroll bar has a built in crop function (after all, you wouldn’t want content going over/under the scrollbar). There might be a clever way to replicate it however.

Edit: My ‘proof’ of this is if you put

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

it won’t add scrolls, but if you remove !important it does.