Home/ Questions/Q 6717957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:54:48+00:00

I am having an issue while developing a web page. Neither Firefox or Internet

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0