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

It seems that I am the only person so far who have implemented
flex units as a complete system. I mean I have infrastructure already in
place to try the calc() in real environment. So here are practical 
questions.

1) Meaning of "free space".

I am assuming that free space gets computed as:
container-inner-space - sum-of-min-widths-of-children.
So if  sum-of-min-widths-of-children is greater than
container-inner-space then
1.a) there is no free space, free space is zero;
1.b) there is a free space but it is negative, if "yes"
    then it is not a free space strictly speaking.
    Good name for it anyone?

Anyway, which one of 1.a) and 1.b) is true?

2) Meaning of calc(flex + fixed)

Let's imagine that we have container with
inner width = 1000px that has single empty child A
so it has no intrinsic min/max-widths.

-----------------------------------------------------------------
If that A element is defined as

A { width: calc(100px + 1fx); }

I assume that min-widths-of-children in this case is:

2.a) min-width = 100px, free-space = 900px.

So its computed width is just 1000px ?

So that definition above is exactly (A - single child)
A { width: 1fx; min-width: 100px; }

Yes/no?

-----------------------------------------------------------------
If A element is defined as

A { width: calc(1100px + 1fx); }

2.b) min-width = 1100px, free-space = -100px so element
  will not overflow as total width = 1000px;
2.c) min-width = 1100px, free-space = 0px and element
  will overflow;

If 2.c is true then it means that free-space as a value
cannot be negative.

-----------------------------------------------------------------
Now let's add min-width constraints in our equations
A
{
   width: calc(100px + 1fx);
   min-width: 900px;
}

2.d)
   min-width = 900px,
   free-space = 100px and
   width = 900px.
2.e)
   min-width = 900px + 100px,
   free-space = 0px and
   width = 1000px.

-----------------------------------------------------------------
Here is over constrained case
A
{
   width: calc(100px + 1fx);
   min-width: 1100px;
}

2.f)
   min-width = 1100px,
   free-space =0px and
   width = 1100px,
2.g)
   min-width = 1100px,
   free-space = -100px and
   width = 1000px.

If 2.g then it means that element dimensions can
be less than its min constraints.
If 2.f then it means, again, free-space cannot be negative.

-----------------------------------------------------------------
Here is one more, but with max-width constrain
A
{
   width: calc(300px + 1fx);
   max-width: 200px;
}

What is the value of free space for the need of flex calculations?

2.h) 1000px - 300px = 700px?
2.i) 1000px - 200px = 800px?

-----------------------------------------------------------------
Consider these two elements in the same 1000px container:

A {   width: calc(700px + 1fx); }
B {   width: calc(500px + 1fx); }

what would be their computed widths?
I assume that:
2.j)  700px and 500px
so again free space is non-negative.
of the are
2.k) 583px and 417px and so we are getting
XUL's additive logic here?

-----------------------------------------------------------------

So if to assume that free space is always non-negative
that leads us to the constatation of the following:
any expression with flex units can only increase
minimal value and never decrease.
So constructions like calc( 20px - 1fx) shall be prohibited.

Sigh.  I think that I am ready to start using
'calc(-1fx)' as an emoticon that means "can of worms".

-- 
Andrew Fedoniouk

http://terrainformatica.com



























-- 
Andrew Fedoniouk

Terra Informatica Software, Inc.

Received on Saturday, 29 May 2010 03:34:40 UTC