Menu
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;"> </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?
819
In this CSS overflow-y example, we have set the overflow-y to visible which means that when the content overflows the content box vertically (ie: top to bottom), it is not clipped but will display outside of the content box.
Definition and Usage The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.
overflow: autoThe auto value is similar to scroll , but it adds scrollbars only when necessary: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
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)
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
