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:
  1. RE: [css3-regions] auto widths and heights of regions (from on 2012-01-06)
  2. Re: [css3-regions] auto widths and heights of regions (from on 2012-01-05)
  3. [CSSWG] Minutes and Resolutions Seattle F2F 2011-07-25 AM: CSSOM, Regions, Floats/Exclusions (from on 2011-08-02)

Related notes:

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.

Vincent Hardy, 27 Sep 2011, 01:46:59

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 style="position:relative">
<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.

Vincent Hardy, 20 Jan 2012, 23:01:24

Another example from Alex Mogilevsky

Another example is two regions in flexbox (which should be common).

<div style="display:flexbox">
<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.

Vincent Hardy, 20 Jan 2012, 23:02:39

Display change log.

Peter Linss <>, Daniel Glazman <>, Chairs, Chris Lilley <>, Bert Bos <>, Staff Contacts
Tracker: documentation, (configuration for this group), originally developed by Dean Jackson, is developed and maintained by the Systems Team <>.
$Id: index.php,v 1.323 2013-12-19 14:47:09 dom Exp $