ACTION-351: Rework the issue of resolved sizes for regions and come up with an alt solution for the group along with use cases and examples
Rework the issue of resolved sizes for regions and come up with an alt solution for the group along with use cases and examples
- Vincent Hardy
- Due on:
- August 1, 2011
- Created on:
- July 25, 2011
- Related emails:
- RE: [css3-regions] auto widths and heights of regions (from firstname.lastname@example.org on 2012-01-06)
- Re: [css3-regions] auto widths and heights of regions (from email@example.com on 2012-01-05)
- [CSSWG] Minutes and Resolutions Seattle F2F 2011-07-25 AM: CSSOM, Regions, Floats/Exclusions (from firstname.lastname@example.org on 2011-08-02)
We actually worked a lot on this issue, in particular with Rossen Atanassov at Microsoft and came full circle. We found that sticking to width:auto being zero is the best thing to do.
height:auto still needs to be documented in the specification.
Resolved in 10/23/2011 Editor Draft.Vincent Hardy, 30 Oct 2011, 16:37:30
Example explaining circular dependencies for height: auto, from David Hyatt
<div id="region1" style="position:absolute; top:0; bottom:0">Å </div>
<div id="region2" style="height:auto">Å </div>
The region order is region1 and then region2, since that's how they occur
in document order. However region1's height is entirely dependent upon
the height of region2. It cannot be determined until region2's height is
known, since region1 is anchored to the top and bottom of the relative
So what do you do here? Your layout engine is going to look at region2
first, but it has no idea what to do with the auto height, since it has
no idea where the flow thread should start. You have to wait, so region2
ends up having a size of 0, which in turn makes region1 0. Now flow into
the regions. You end up putting all of the flow thread into region2, but
then this makes the relative block tall enough that region1 could now
have held all of the content. But that in turn should shrink region2 back
down to holding nothing and being 0. And so on, forever.
Another example from Alex Mogilevsky
Another example is two regions in flexbox (which should be common).
<div id="region1" style="flow-from:x; flex:1"></div>
<div id="region2" style="flow-from:x; flex:1"></div>
Flexbox needs preferred size of all children before it calculates exact size for any child, but second region's preferred size won't be known until first regions exact size is known.
Display change log.