- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Fri, 06 Jun 2008 13:01:10 -0700
- To: fantasai <fantasai.lists@inkedblade.net>
- CC: Anne van Kesteren <annevk@opera.com>, robert@ocallahan.org, dbaron@dbaron.org, www-style@w3.org
fantasai wrote: > Anne van Kesteren wrote: >> >> On Fri, 06 Jun 2008 18:06:24 +0200, Andrew Fedoniouk >> <news@terrainformatica.com> wrote: >>>>> How do flex-units interact with collapsing margins? E.g. >>>>> <div style="overflow:auto; height:500px;"> >>>>> <div style="height:1*; margin:1*;">Hello</div> >>>>> <div style="height:2*; margin:2*;">Kitty</div> >>>>> </div> >>>>> How does that work? Allocating flex height first and then >>>>> collapsing margins means the child divs don't fill the container. >>>>> But trying to collapse margins before resolving the flex heights >>>>> seems crazy. >>>> I would collapse the adjacent flex margins so that 1* collapsing with >>>> 2* becomes a 2* gap. Then distribute the remaining space accordingly. >>> >>> Correct. margin:1* collapse in the same way as margin:1em; >> >> What if one margin is in flex units and the other is 100px or something? > > I expect you'd keep two values for the margin: the fixed length, and the > flex value. Collapsing two margins calc(2* + 100px) and calc(1* + 150px) > would give you a collapsed margin of calc(2* + 150px). The 150px is > always > applied, and the flex value absorbs its quota of additional space when > the > available space is distributed. > > By definition of the calc() function [1] flex units cannot be used there. "The expression within the parethesis is computed at the same time as 'em' lengths are computed" And flexes evaluated after that - as a final step of the layout. As I said in previous message for cases when flex margin is collapsed with non-flex value we can use non-flex value as a min constraint and flex value as a weight (flex per se). So such margin will be computed according to the flex value but will be not-less than non-flex value. That is simple and human understandable. The same applies to min/max-width/height - flex values have no sense for these attributes and flexes are used there they should evaluate to zero. [1] http://www.w3.org/TR/css3-values/#calc -- Andrew Fedoniouk. http://terrainformatica.com
Received on Friday, 6 June 2008 20:02:02 UTC