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

On 6/17/13 1:46 AM, "Catalin Badea" <badea@adobe.com> wrote:

>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.

Thanks for bringing this up. My first thought is that the regions
processing model should merely be an input to the flex layout algorithm.
So when flex asks for a region height, we run through the entire
processing model to get an answer, without reference to the flex layout
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

I'm assuming this is referring to step 7, where we determine the
hypothetical cross size of each item. This is where we need to run through
the regions processing model to contribute a region height to the flex
layout algorithm.

>2. Stretch the region to 200px

This doesn't happen (yet). Stretching waits until step 11.

>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.

The answer to step 7 is the result of the regions processing model, which
would be the first region break (or the entire height of the named flow).

>4. Flexbox layout

Now we run through the rest of the steps and either get a flexbox with a
cross size equal to the height of the region, or 200px (if the region is
smaller). This is where the region might stretch to 200px, but only if the
processing model gave a smaller answer earlier.

>
><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.

I agree. Here when we get to step 7, there is a constrained height that
can be used in the regions processing model.

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

Here the main sizes are determined by the flex layout algorithm by step 6,
then they are used as inputs for the region processing model in step 7.
That's assuming a flex-direction:row container, where the flexible size is
width.

If you're talking about a flex-direction:column container, then the
flexible size is height. Here we'd run through the regions processing
model to give heights as input to step 3 of the flex layout algorithm. The
heights returned will be determined entirely from the processing model -
if there is no region break, then the first region is the height of the
named flow and the second region is zero height. Otherwise the heights
would be determined by whatever region breaks are present. Then steps 5
and 6 of the flex layout model might change those heights.

>
>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 22:34:22 UTC