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

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

Btw, you don't have to explicitly set `overflow-x: visible` - that's the default presentation. — Šime Vidas, Jun 05 '12 at 18:58
`overflow-y: auto;` means that the vertical scroll-bar may or may not be present. I guess, a vertical scroll-bar represents a horizontal boundary, so the browsers do not allow text to overflow horizontally if a vertical scroll-bar may appear. So, if `overflow-y: auto;` is set, `overflow-x: visible;` does not apply. But that's just my guess. — Šime Vidas, Jun 05 '12 at 19:03
Good question. Definitely not the expected behavior. Notice though if you take the wrap out, the issue is gone (when leaving the overflows as described).. — KP., Jun 05 '12 at 19:11
According to the spec, if one is set to `visible`, and the other to `auto` or `scroll`, then the `visible` is changed to `auto`. If you're happy with a javascript solution, then set both to `hidden` and use one of the javascript scrollers. But I think you should probably revisit what effect you're trying to achieve, because the content would need to get clipped eventually anyway - even if at the window level. — musaul, Jun 05 '12 at 20:02
hey just found your question, maybe ``position: relative`` will do the trick ;) updated demo: http://jsfiddle.net/dca866zx/ — Betty St, Feb 03 '15 at 09:59

score 25 · Accepted Answer · edited May 23 '17 at 12:30

25

You cannot, that is written in the spec.

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

edited May 23 '17 at 12:30

Community

answered Jun 06 '12 at 05:04

tibo

what about a javascript workaround? – Toni Michel Caubet Jun 06 '12 at 15:13
8

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. – tibo Jun 06 '12 at 23:33
it is written specs ?? what does this mean...... are you saying that this is not bug and venders does this intense fully – Ravinder Payal Nov 10 '15 at 10:55
@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. – Randy Jul 04 '17 at 15:35
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. – Pietro Coelho Nov 03 '17 at 20:20
@PietroCoelho Provide an example then, please, for the sake of the community. – Kenton de Jong Apr 07 '23 at 22:03

1 Answers1