Re: [CSS3 Regions] Circular logic with "auto" height values for regions

Here is a concrete example:

<div style="position:relative">
    <div id="region1" style="position:absolute; top:0; bottom:0">…</div>
    <div id="region2" style="height:auto">…</div>
</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 block.

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.

On Oct 4, 2011, at 11:37 PM, David Hyatt wrote:

> I was beginning to look at how to implement the "auto" height rules described in section 4.2.2, and it seems impossible to implement.
> 
> The order content flows into regions is determined by the document order. However, this does not match the order in which engines lay out elements. For example positioned objects require the dimensions of the containing block to be known (including intrinsic sizes) before they can lay out, and therefore they lay out after normal flow objects. There are plenty of other examples of this. My point being that at the time you are trying to figure out the size of a region, you can't know which part of the flow thread is going to fit into it. You just won't have that information yet.
> 
> What you can do is return 0, wait until all the regions got an initial layout, and then start trying to put the contents of the flow thread into the regions. When you discover that a region changes size to accommodate the rest of the flow thread, though, you're put in a position where the region's change in size could affect earlier regions that the flow thread uses. This is possible with any number of layouts, including positioning, floats, flex box, grid, etc.
> 
> My recommendation is that this feature has to be cut. I can't see any realistic way to implement it. You can't create a circular layout dependency between the regions and the flow contents. They have to be independent.
> 
> dave
> (hyatt@apple.com)
> 
>

Received on Wednesday, 5 October 2011 18:41:44 UTC