W3C home > Mailing lists > Public > www-style@w3.org > May 2010

[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 

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; }


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
   width: calc(100px + 1fx);
   min-width: 900px;

   min-width = 900px,
   free-space = 100px and
   width = 900px.
   min-width = 900px + 100px,
   free-space = 0px and
   width = 1000px.

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

   min-width = 1100px,
   free-space =0px and
   width = 1100px,
   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
   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


Andrew Fedoniouk

Terra Informatica Software, Inc.

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:46 UTC