Page 1 of 1
Trouble with overflows, hidden + visible at the same time.
Posted: Fri May 14, 2010 5:28 am
by JellyFish
As I was styling my HTML, I stumbled across some strange behavior in web browsers. Give this a go on
jsfiddle.net:
Code: Select all
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Code: Select all
div {
background: grey;
overflow-x: visible;
overflow-y: hidden;
max-height: 100px;
width: 100px;
}
div div {
height: 10px;
width: 200px;
margin: 5px;
background: blue;
}
If you're using WebKit or Firefox, you'll notice that rather than the blue divs overflowing outside of the parent grey div, a scroll bar is in it's place. There aren't even scroll bars in IE. It's as if
overflow-x: visible; isn't even recognized. I'm trying to get the content within the div to be cropped vertically only, and allow content to overflow outside of the div horizontally. Anyone know why would it not be working as intended?
Re: Trouble with overflows, hidden + visible at the same tim
Posted: Fri May 14, 2010 8:40 am
by Weirdan
overflow-x is a part of css3-box, css3-box is a working draft => nobody is obliged to support it.
See
http://www.brunildo.org/test/Overflowxy2.html
Re: Trouble with overflows, hidden + visible at the same tim
Posted: Sun May 16, 2010 4:10 am
by JellyFish
"Nobody is obliged...", that's besides my point. Nobody is obliged to support HTML5, but browsers still work hard to support it.
brunildo.org wrote:According to the spec ... 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’ ....
You means to say, the standards defines this unexpected behavior? That is, have overflow-x set to auto when overflow-y is set to hidden, or only when it's set to scroll/auto?
Re: Trouble with overflows, hidden + visible at the same tim
Posted: Sun May 16, 2010 5:54 pm
by Weirdan
JellyFish wrote:You means to say, the standards defines this unexpected behavior?
I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent. Consider the following example:
Code: Select all
<style type="text/css">
#outer {
width:100px;
height:100px;
background:red;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
It would look like this (stars represent border of inner div, dashes - border of outer one, dots are page background):
Code: Select all
...............................
+----------+...................
|**********+***********........
|* | *........
|* A | B *........
|* | *........
++---------+ *........
.* *........
.* *........
.* C D *........
.* *........
.**********************........
...............................
Now let's change overflow properties on outer div to look like your example: overflow-x:visible and overflow-y: hidden, and then consider if different parts of inner div (marked with A, B, C and D) should be visible.
- Part A does not overflow anything, so it's visible.
- Part B does overflow on the right, so it should be visible according to overflow-x: visible
- Part C does overflow to the bottom, so it should be hidden according to overflow-y: hidden
- And now the most interesting part: part D. It does overflow both on the right and to the bottom, so should it be visible or not?
point 4 above shows inconsistence of such style combination. This is why browsers reject your styling.
Re: Trouble with overflows, hidden + visible at the same tim
Posted: Wed May 19, 2010 8:00 pm
by JellyFish
I understand now, Weirdan. However, it would be interesting if the specs where to define this behavior. Maybe, one could over-ride the other with some kind of keyword.
Code: Select all
overflow-x: visible;
overflow-y: hidden !important;
In this case part D in your graph would be hidden. If the !important keyword was used on overflow-x, part D would be visible. And if no !important keyword is used at all, then the current behavior we have now is applied.
Re: Trouble with overflows, hidden + visible at the same tim
Posted: Thu May 20, 2010 3:57 am
by Weirdan
Btw, the effect you want is easily achieved by wrapping the outer div with another div and setting overflow-y on that div to hidden:
Code: Select all
<style type="text/css">
#outer-wrapper {
overflow-y:hidden;
}
#outer {
width:100px;
height:100px;
background:red;
border:solid red 1px;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}
</style>
<div id="outer-wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>