Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 656
Toni Michel Caubet Avatar asked Jun 05 '12 18:06

Toni Michel Caubet


People also ask

Why does overflow hidden not work?

It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.

What is difference between overflow and overflow-X?

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both): overflow-x specifies what to do with the left/right edges of the content. overflow-y specifies what to do with the top/bottom edges of the content.

What is default overflow-Y?

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges. Tip: Use the overflow-x property to determine clipping at the left and right edges. Show demo ❯ Default value: visible.


1 Answers

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.

like image 90
tibo Avatar answered Oct 08 '22 00:10

tibo