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

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

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?

Consider these samples:

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

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

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

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

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

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.

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?

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Wednesday, 2 June 2010 02:48:21 UTC