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

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Fri, 28 May 2010 20:34:07 -0700
Message-ID: <3C1D1F1AD6AF48678431DD42E5DD500D@terra3>
To: <www-style@w3.org>
```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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:35 UTC