Trouble with overflows, hidden + visible at the same time.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Trouble with overflows, hidden + visible at the same time.

Post 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?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Trouble with overflows, hidden + visible at the same tim

Post 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
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Trouble with overflows, hidden + visible at the same tim

Post 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?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Trouble with overflows, hidden + visible at the same tim

Post 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.
  1. Part A does not overflow anything, so it's visible.
  2. Part B does overflow on the right, so it should be visible according to overflow-x: visible
  3. Part C does overflow to the bottom, so it should be hidden according to overflow-y: hidden
  4. 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Trouble with overflows, hidden + visible at the same tim

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Trouble with overflows, hidden + visible at the same tim

Post 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>
 
Post Reply