Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overflow x and y? [duplicate]

Tags:

css

overflow

I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it's not working how I'd like it to. It adds vertical scroll bars - I assume this is because overflow-x and overflow-y don't function together.

As far as I'm aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?

Just so there's no confusion here's a fiddle to explain a little more: http://jsfiddle.net/kwnQk/

edit
Here is the actual issue I'm having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It's a shame the overflow function works the way it does because the div's overflow-x must be hidden, causing the div's overflow-y to be auto.

edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.

like image 267
Richard Hedges Avatar asked Nov 03 '22 14:11

Richard Hedges


1 Answers

I would think you can just leave the overflow property to visible and just use padding left and right. Unless you have images, the text should just get wrapped.

For images, you should look at using children divs with width:100%

like image 65
Naman Goel Avatar answered Dec 11 '22 13:12

Naman Goel