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

--------------------------------------------------
From: "Brad Kemper" <brad.kemper@gmail.com>
Sent: Monday, May 31, 2010 10:30 AM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>; "Zack Weinberg" 
<zweinberg@mozilla.com>; <www-style@w3.org>
Subject: Re: [css3-flex] calc(flex) and concept of free space.

>
> On May 30, 2010, at 8:00 PM, Andrew Fedoniouk wrote:
>
>> Anyway, tell me better what would be the width of inner div here:
>>
>> <div width:1000px padding-left:1fx>
>>   <div width:calc(500px + 1fx) />
>> </div>
>>
>> Something tells me it will get zero, correct?
>
> The flex units are based on distributing the space of the children of 
> flexboxes. So, even if these two DIVs had flexbox parents, they are two 
> different generations, and the flex of one distributes space from a 
> different pool than the other. So, the '1fx' of the outer DIV depends on 
> how much space is available in its parent flexbox (if that is a 1000px, 
> based on your other examples, then the padding would be 0). The 1fx on the 
> inner DIV is meaningless unless the outer one is 'display:flexbox', 
> otherwise it is distributing a 500px (1000 - 500) to itself.
>
>

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?

Another question:

<div width:1000px box-sizing:content-box>
   <div #flexible width:calc(500px + 1fx) >
       <div width:800px />
   </div>
</div>

What would be the width of div#flexible ?

This one is not that simple as it looks at first glance.
Compare it with this one:

<div width:1000px box-sizing:content-box>
   <div width:500px >
       <div width:800px />
   </div>
</div>

In my implementation of flex algorithm all elements that
it operates behave as if they are defined as display:table-cell -
their content never overflows.

To be precise I have special 'overflow:none' value that
tells the engine that the element must not overflow.
That is in principle what display:table-cell is doing under the hood.
Only explicit overflow:visible declaration in my case allows
elements to overflow.

Here is an example that can be observed in either Sciter or HTMLayout:
Just comment/un-comment that overflow:visible to see the effect.

<html>
  <head>
    <style>
      div#flexbox
      {
        flow:vertical; // triggers flex computations
        size:*;        // width/height = 1fx
      }
      div#flexchild
      {
        size:*;        // width/height = 1fx
        margin:*;      // flex margins, 1fx - positioned in the middle
        border:3px solid;
        /*overflow:visible;*/
      }
      span#float
      {
        display:inline-block;
        background:gold;
        border: 3px solid red;
        width:300px;
      }
    </style>
  </head>
<body>
   <div #flexbox>
      <div #flexchild>
        <span #float>float</span>
        text for testing purposes
      </div>
   </div>
</body>
</html>

Flex elements should either to behave as display:table-cells or
it is better to introduce overflow:none; that has a good value
by itself.

E.g. you may change that  div#flexchild to this:

  div#flexchild
      {
        size:50%;        // width/height = 50% - "fixed" width.
        margin:*;      // flex margins, 1fx - positioned in the middle
        border:3px solid;
        /*overflow:visible;*/
      }

And to play with overflow:visible; again.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Tuesday, 1 June 2010 03:27:15 UTC