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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 31 May 2010 22:53:07 -0700
Message-ID: <AANLkTikcUqSB01YYn5U2XINe6g9V49GSQNV9pWzxoC8X@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: Brad Kemper <brad.kemper@gmail.com>, Zack Weinberg <zweinberg@mozilla.com>, www-style@w3.org
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.

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

#flexible is 1000px wide.  Perhaps you left something out of this
example?  As written, it's completely trivial, and doesn't illustrate
anything useful regarding table cells.

Received on Tuesday, 1 June 2010 05:53:59 UTC

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