Re: [css3-flex] calc(flex) and concept of free space.

On Tue, Jun 1, 2010 at 7:47 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> --------------------------------------------------
> From: "Tab Atkins Jr." <jackalmage@gmail.com>
> Sent: Monday, May 31, 2010 10:53 PM
> To: "Andrew Fedoniouk" <news@terrainformatica.com>
> Cc: "Brad Kemper" <brad.kemper@gmail.com>; "Zack Weinberg"
> <zweinberg@mozilla.com>; <www-style@w3.org>
> Subject: Re: [css3-flex] calc(flex) and concept of free space.
>
>> On Mon, May 31, 2010 at 8:26 PM, Andrew Fedoniouk
>> <news@terrainformatica.com> wrote:
>>>
>>> Terribly sorry. Forgot to add box-sizing:border-box there.
>>> So the question looks like:
>>>
>>> <div width:1000px padding-left:1fx box-sizing:border-box>
>>>  <div width:calc(500px + 1fx) />
>>> </div>
>>> What would be the width of inner div?
>>> In other words what exactly that preferred width means?
>>
>> (Assuming that the outer div is a flexbox, but not a child of another
>> flexbox.)
>>
>> The inner div is 500px.  Read section 6.2 of my proposal for the
>> precise details.  The outer div's flex gets distributed in the first
>> round, the child's flex is distributed in the second round.  When
>> distributing space, you compute free space by looking at the "preflex
>> lengths" of the children.  That's 500px in this case, so there's 500px
>> of free space that the outer div's padding can soak up.
>>
>
> There are terms "preflex length" and "relevant preflex length"
> but they were not defined anywhere.

Dude, the definitions are right there at the bottoms of section 6.1 and 6.2.


> So is my question. Here we have two layers of flexes, outer
> flex padding-left:1fx, width:1fx and inner flex
> inside, that calc(700px + 1fx):
>
> <div width:1000px padding-left:1fx box-sizing:border-box>
>  <div width:calc(700px + 1fx) />
> </div>
>
> While computing free space in outer div we need to know
> "width of the flexbox content". In this case it is a sole element:
>  <div width:calc(700px + 1fx) />
> As far as I understand your document the final result of
> calc(700px + 1fx) calculation is not known at the moment
> of outer layer calculations - it will be computed later when
> inner layer will have box width to distribute its flexes.
> So I suspect inner div will get 500px, right?

No, I already answered this precise question.

While the used length of the inner <div> isn't known yet (it has to
wait until the second distribution round, section 6.3), the *preflex
length* is what we care about, and that's known.  The preflex length
is 700px (the greater of the minimum size (0px) and the preferred size
(700px)).  So the padding on the outer div will get 300px, and the
inner div will be 700px wide.


> Consider these samples:
>
> a)
> <div width:1000px flow:horizontal >
>  <div width:calc(200px + 1fx) />
>  <div width:calc(400px + 1fx) />
> </div>

Free space is 400px.  This is split evenly and added to the preferred
widths.  The first child ends up 400px wide, the second is 600px wide.


> b)
> <div width:1000px flow:horizontal >
>  <div min-width: 200px width: 1fx />
>  <div min-width: 400px width: 1fx />
> </div>

Ooh, that exposes a bug in my algo.  Section 6.5 *should* say "This
must be equal to the total length minus the sum of all the
**preferred** lengths in the set of lengths.".  I've fixed it now.

In that case, free space is 1000px.  It's split evenly and added to
the preferred width of each child (which is 0 for both in this case).
So both end up as 500px.


> c)
> <div width:1000px flow:horizontal >
>  <div width:calc(200px + 1fx) min-width:200px />
>  <div width:calc(400px + 1fx) min-width:400px />
> </div>

Same as A.

> d)
> <div width:1000px flow:horizontal >
>  <div width: 1fx >some-200px-wide-text</div>
>  <div width: 1fx >some-400px-wide-text</div>
> </div>

Rendering is same as B in this case, but may be different if the
parent's width is smaller, as this has no min-width constraints.

> e)
> <div width:1000px flow:horizontal >
>  <div width: 1fx >some-500px-wide-text</div>
>  <div width: 1fx >some-700px-wide-text</div>
> </div>

Same as D.  (The contents of the second child overflow.)

> f)
> <div width:1000px flow:horizontal >
>  <div width:calc(500px + 1fx) >some-500px-wide-text</div>
>  <div width:calc(700px + 1fx) >some-700px-wide-text</div>
> </div>

Free space is -200px.  This gets split evenly and added to the
preferred width of each.  The first child ends up as 400px wide, the
second child as 600px wide.  The contents of both overflow.

> Reading "6.5 Free Space Allocation Algorithm" I've got an
> impression  that a) and b) will produce the same layout,
> correct?
> This statement of yours "Determine the amount of free space available.
> This must be equal to the total length minus the sum of all
> the preflex lengths in the set of lengths."
> is in particular causing some problems in my mental model,
> or I do not understand what that preflex length means.
>
> In any case I would appreciate if you will provide
> final values in cases above - will help to understand
> the model of flexibility you use.

I've pointed out where "preflex" and "relevant" lengths are defined,
and provided final values for all of the cases.  Hopefully things are
clearer now.

> And yet about 6.5.2.3:
> "Add this free space to the preferred size of every
> flexible length"
>
> What is the preferred size of this element:
> <div width: 1fx >some-500px-wide-text</div>
> zero or 500px?

0.

~TJ

Received on Wednesday, 2 June 2010 23:52:35 UTC