RE: [css3-flexbox] ussue 2 - fill-available vs. fit-content

> From: Tab Atkins Jr. [mailto:jackalmage@gmail.com]
> Sent: Monday, May 07, 2012 11:11 PM
> To: Alex Mogilevsky
> 
> By "shrink-wrap" here, we mean "*really* shrink-wrap".  For example, say
> that a float contains just two words, both 100px wide, and it's put in a
> container that's 150px wide.  The formula is "max(min-content, min(max-
> content, fill-available))", so in this case that means "max(100px,
> min(200px, 150px))", which resolves to 150px.
> This will cause the second word to wrap to a new line.  However, the float
> *stays* 150px, even though it now only needs 100px total.
> 
> The question is, should Flexbox have the float's behavior, or should it
> shrink to 100px in the same situation (assuming a multi-line row flexbox
> with two items, both 100px wide).
> 
> That's the second sentence, though. For the first sentence in the issue,
> you're right.  We handle 'auto' properly up in step 4 anyway (where we
> just "use the main size property").

I see. Good question.

You are suggesting that flexbox could become 100px wide in the same situation. Do we want that?

I am not sure. What if flex-pack is 'justify'? Do we still want it to be 100px, or do we want 50px between items?

I think I would keep doing it same as text. I haven't seen many cases in real life where shrink-to-max-line would really make a difference. But I could live with the other option too, and maybe even get convinced it is better.

There is a related issue of max-height...

Consider this:

<div id="F" style="display:flex; flex-flow:column wrap; max-height:150px">
 <div id="A" style="height:100px"></div>
 <div id="B" style="height:100px"></div>
</div>

Flexbox doesn’t have a height, either specified or otherwise inferred. When processed as a block, it is given available width and infinite height. 

If lines wrap into max-height (as in spec), "F" will be 100px tall.
If height is calculated as min(content height, max-width), as will happen if parent layout is also a vertical flexbox, "F" will be 150px tall.

Would be good to make these consistent... Watch out for perf though, a choice of 100px may require yet another layout pass.

Alex

Received on Tuesday, 8 May 2012 08:47:17 UTC