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.