6

I have a 400px x 400px div that I want to scroll vertically. So I'm setting overflow-y: auto. But occasionally, I want the content inside the div to overflow-x:visible.

This doesn't work. I think it's because you can't set different overflow values if one of them is visible.

True?

Otherwise, is there a decent css/js fix for this? I noticed flow app appends a calculated, absolutely-position div to the body whenever a situation like this occurs: http://cl.ly/32392W0U2t1y2Q103X2d. Is this the best solution? And are there any plugins/tutorials to look at?

For Sc
  • 61
  • 1
  • 2
  • Here is a fiddle for people to mess with. As soon as one scrollbar is introduced, the second comes with it. http://jsfiddle.net/YT7AC/ – mrtsherman Jan 26 '12 at 06:00

2 Answers2

3

You can’t set different overflow values if one of them is visible; the CSS3 Box Model draft says this in section on overflow: “The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.”

Regarding workarounds, you would first need to decide what the desired behavior is. When you have a scroll bar on the right, how would overflow-x: visible work? Should the overflowing content continue on the right of the scroll bar somehow? This would be difficult to arrange. Or should the scroll bar move to the right?

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    Right of the scrollbar, yes. It looks like some apps append an absolutely-position div to the body. That'd work, yeah? – For Sc Jan 26 '12 at 07:08
  • Good explanation of why this is visually difficult. I have the same requirement, and hadn't through about this problem. – Breiz Mar 06 '14 at 21:13
0

Try adding white-space: nowrap;

Lie Ryan
  • 62,238
  • 13
  • 100
  • 144