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

javascript css overflow
Toni Michel Caubet picture Toni Michel Caubet · Jun 5, 2012 · Viewed 23.6k times · Source

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

Answer

tibo picture tibo · Jun 6, 2012

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.

Related questions

Check if an element's content is overflowing?

What's the easiest way to detect if an element has been overflowed? My use case is, I want to limit a certain content box to have a height of 300px. If the inner content is taller than that, I cut …

Read More
Bootstrap button drop-down inside responsive table not visible because of scroll

I have a problem with drop-down buttons inside tables when are responsive and scroll active because the drop-down is not visible because of overflow: auto; property. How can I fix that in order to show drop-down option of button when …

Read More
CSS / JavaScript - content outside a element with overflow:hidden

I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made. Inside this div it's all the site content, including some tooltips. These tooltips …

Read More