11

I am having an issue while developing a web page.

Neither Firefox or Internet Explorer will present the behavior that I expect for the following code snippet:

<div
    style="overflow-x: visible; overflow-y: auto; width: 200px; height: 200px; border: 1px solid #F00;">
    <div style="width: 300px; height: 300px; background-color: #0F0;">&nbsp;</div>
</div>

What I would expect would be to be able to see the content that overflows on the x side of the container div, but not the content that overflows on the bottom (with a scrollbar to see more). Instead, what I see is an x scrollbar and a y scrollbar.

Note: an inspection of the computed style properties in firebug reveals that firefox is using overflow-x: auto; for the container.

Is this behavior expected? I understand that there is some ambiguity about requesting to put a scrollbar on top of my own content (e.g. that my horizontal content would go past the vertical scroll bar, so that would have to cover some of the content).

So is the behavior that I am experiencing standards compliant?

WirthLuce
  • 1,361
  • 13
  • 23

1 Answers1

20

Well, I will be damned, I decided to check what CSS(3) spec had to say about this, and it says:

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’.

So, in short, yes, what I was experiencing was entirely the expected behavior.

Source: CSS basic box model W3C Working Draft 9 August 2007 (just after the example)

WirthLuce
  • 1,361
  • 13
  • 23
  • 3
    That makes sense to me; how could you use the scrollbar if there was content overflowing on top of it? – joshnh Oct 26 '11 at 05:05
  • I have the same problem, and I use callouts to the left of my container to show error messages. They wouldn't be in the way of the vertical scrollbar if I were allowed to do so... – Niklas Wulff Dec 03 '12 at 12:21