Open Bug 570036 Opened 14 years ago Updated 2 years ago

Flexible box does not allow overflow scrolling of children elements without extra markup

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
macOS
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: kpdecker, Unassigned)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_3; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.55 Safari/533.4
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.3a5pre) Gecko/20100603 Minefield/3.7a5pre

The page has an absolute positioned element with vertical flex box layout applied. It then has two children, one inflexible and one flexible. The flexible element has sufficient content to cause overflow and has overflow: auto.


Reproducible: Always

Steps to Reproduce:
1. View http://incaseofstairs.com/tests/flex-box/
Actual Results:  
Overflow content is clipped to the display box parent.

Expected Results:  
My expectation from my reading of the spec and the behavior exhibited by WebKit's -webkit-box display type is that the flexible child will expand to fill the remainder of the parent and and provide scrollbars for any overflow content;



I was able to make this work if the hierarchy is something like:
<div style="position: absolute">
  <div style="display: -moz-box">
     <div></div>
     <div style="-moz-box-flex: 1; min-height: 1px; overflow: auto"></div>
  </div>
</div>
Hi,

same problem here, reproductible on Firefox 3.6 and 3.7.

A high width (or height) constraint on a box's content will ignore the flexible box container contraint (overflow is just a case).
So for example, with a div#global with width:400px; containing 3 flexible boxes, if one of the box contains a div width:500px; , the div#global will no longer be containts by width:400px;

(you can test on http://hacks.mozilla.org/wp-content/uploads/2010/02/exemple-simple.html)

For the moment, the way I found to hack the bug is to set display: -moz-stack; on content using the overflow. It seems to work without side effect.

Regards,
Gaetan Renaudeau
Unfortunately, the 'display: -moz-stack;' hack have side effect : it ignore z-index and is always display in front others elements.

Please fix this flexible box critical bug.

Regards
Does 'overflow: scroll' cause scrollbars in the case where 'overflow: auto' doesn't give you scrollbars in some cases?  (If not, it's probably a frame construction bug, but if so, it's probably a layout bug.)
I have updated the testcase to include an example that uses overflow: scroll. Under
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
this does display the scrollbar, but without the slider portion.

Firebug reports the -moz-box container as having a height of 381px and the container that should have the overflow having 608px height.
I assume this is a cross-platform issue (it happens for me on Windows too).

This is a rather critical bug (if we imagine the world converts to flex-box layouts --- which it will) because it is an extremely common use case for web apps (and maybe other sites too). In particular, imagine something like a Google Docs Document with a fixed sized toolbar up top and scrollable document below.
@voracity flexbox isn’t really so good for page layouts, as they’re still source order-dependent. I wrote an article covering the issues with using flexbox for layout here: http://oli.jp/2011/css3-flexbox/
@Oli Studholme: This is not relevant for the bug. In addition: the flex-box model is based on Mozilla's XUL and if Mozilla would like to deprectae XUL by using HTML this bug is critical. So, how to layout extension in Firefox & Co in HTML if the box model in XUL is not available/not bug free. Therefore the priority should be high and it should not be hard to fix the bug.

Another test case for the bug: 

http://jsfiddle.net/nRT9c/10/

Expected result: Only the green box should show the scroll bar.
The bug is not yet fixed on FF 14.0.1, it's a major requirement to build border layouts with the css flexbox model (very usefull for fullscreen web apps).

Test case http://jsfiddle.net/nRT9c/10/ show the problem very well.
(In reply to guillaume86 from comment #8)
> The bug is not yet fixed on FF 14.0.1, it's a major requirement to build
> border layouts with the css flexbox model (very usefull for fullscreen web
> apps).
> 
> Test case http://jsfiddle.net/nRT9c/10/ show the problem very well.

Side note: min-height: 1px workaround still works: http://jsfiddle.net/nRT9c/24/
How is this still a thing 5 years later! For god's sake even IE can do this properly! Here's yet another fiddle http://jsfiddle.net/aronduby/y8aLoLnf/2/ I'm glad that there's a min-width/height workaround but that feels like a dirty IE hack from back in the day.
This bug is about old XUL flexbox (which is basically no longer maintained), not new CSS flexbox, for which a separate bug should be filed if needed.
8 years!This problem still not be solved???
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.