overflow-x: visible; doesn't work with overflow-y: auto; any workaround?

Question

i am trying

.item {
   width: 100px;
   overflow-x: visible;
   overflow-y: auto;
}

But vertical overflow:auto seems to override horizontal's

fiddle: http://jsfiddle.net/xcUTV/

Is there any workaround for this? even with a bit of javascript

Solution

You cannot, that is written in the spec.

Have a look here : https://stackoverflow.com/a/6433475/1343096

Since it is written in the spec, I am 99% sure that it is impossible to do.

Comments

[Toni Michel Caubet]

what about a javascript workaround?

[tibo]

javascript is not magic! This kind of thing are implemented at a low level by the browser itself, no matter if the instructions comes from css or javascript. I don't say it's not possible, I just say that it would surprised it is, and it would be against the specification.

[Ravinder Payal]

it is written specs ?? what does this mean...... are you saying that this is not bug and venders does this intense fully

[Randy]

@RavinderPayal Yes, that is exactly what that means. Browsers are meant to hide the overflow if there is a scrollbar present, because there should not be a scrollbar halfway down your content.

[Pietro Coelho]

There's actually a lot of ways to accomplish this with javascript. One way is to position the element at root (direct child of body) and then use javascript to position the element.