[css-regions][css-flexbox] Interaction between flexboxes and regions

Hello all,

I would like to point out some issues between flexbox containers and regions with auto-height. The interaction between the two elements is not covered in detail in the specs [1][2]. CSS Regions fragments' height resolution is a two phase process which is not taken into account when laying out flexboxes with regions children. Also, there is no clear specifications whether the size constraint imposed by a flex container has priority or not in the thread flowing algorithm.
Some use cases:

<flexbox height=auto>
<region height=auto>
</region>
<div height=200px>
</div>
</flexbox>
<region height=auto>
</region>
1. The flexbox will try to determine the height of each item by performing a layout on the region and the div:
region height: 0, div height: 200px
2. Stretch the region to 200px
3. Flow thread layout: Here the flow thread can either flow content using 200px as maximum height or until the first region break causing the flexbox to resize if the flowed content height is greater than 200px.
4. Flexbox layout

<flexbox height=100px>
<region height=auto>
</region>
</flexbox>
<region height=auto>
</region>
This time the flexbox container has a fixed sized, which makes using the flex height constraint as the obvious choice when flowing content.

Finally, two auto-height regions with grow attributes:
<flexbox height=auto>
<region flex-grow=1>
</region>
<region flex-grow=2>
</region>
</flexbox>

Regards,
Cătălin Badea

[1] http://dev.w3.org/csswg/css-regions

[2] http://dev.w3.org/csswg/css-flexbox

Received on Monday, 17 June 2013 12:42:07 UTC