X and y overflow?

Question

I have a div to hide content with overflow-x and display ( visible ) content with overflow-y .
Unfortunately, it does not work as I would like. It adds vertical scrollbars - I assume this is because overflow-x and overflow-y do not work together.

As far as I know, if one overflow is set to hidden, the other becomes automatic.
Is there any other way around this? So I can have overflow hidden horizontally and displayed (without scrolling) vertically?

Just like that, there is no confusion here to explain a little more: http://jsfiddle.net/kwnQk/

change
Here is the actual problem I'm experiencing: http://jsfiddle.net/kwnQk/1/
I have a select box created from div and jQuery that ends up in the height of the div, causing it to add scrollbars.
It’s a shame that the overflow function works the way it does, because the overflow-x div must be hidden, making the overflow-y div auto.

change 2
Please check out this new JSFiddle to show why I need overflow: http://jsfiddle.net/kwnQk/3/
It also consists of sliders that must be set to a specific width. And they cannot take the entire height of the page, so I also need to limit their height.

Answer 1

I would think that you can just leave the overflow property visible and just use padding left and right. If you do not have images, simply wrap the text.

For images, you should look at using child divs with a width of: 100%

Answer 2

Can you try some jQuery scroll plugins for this?

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

http://baijs.nl/tinyscrollbar/

http://www.net-kit.com/jquery-custom-scrollbar-plugins/

Answer 3

Try using the jQuery selectbox plugin, this is great and do exactly what you are trying:

http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

Answer 4

Bad combination, unfortunately. From the documentation http://www.w3.org/TR/css3-box/#overflow-x :

The calculated values ​​of "overflow-x" and "overflow-y" coincide with the indicated values, except that some combinations with "visible" are impossible: if one of them is indicated as "visible" and the other is "scroll" or "auto then 'visible is set to' auto.