Re: [css-flexbox] Computation Algorithm

On Mon, May 10, 2010 at 9:40 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> Sorry, but did you try it?
>
> I didn't manage to make 1:2 widths.
>
> Here is my test case:
>
> <!DOCTYPE html>
> <html>
>  <head>
>   <title>Mozilla FlexBox</title>
>   <style>
>   body { font:10pt verdana; }
>   div { white-space:nowrap; }
>   #box1 { display:-moz-box; width:300px; -moz-box-orient:horizontal; }
>   #box2 { -moz-box-flex: 1.0; width:0; background:gold;}
>   #box3 { -moz-box-flex: 2.0; width:0; background:red;}
>   #ruler100 { width: 100px; border-bottom:3px solid green; margin-top:1px;}
>   #ruler200 { width: 200px; border-bottom:3px solid green; margin-top:1px;}
>   #ruler300 { width: 300px; border-bottom:3px solid green; margin-top:1px;}
>   </style>
>  </head>
> <body>
>  <div id="box1">
>   <div id="box2">box 2</div>
>   <div id="box3">box 3</div>
>  </div>
>  <div id="ruler100" >100px</div>
>  <div id="ruler200" >200px</div>
>  <div id="ruler300" >300px</div>
> </body>
> </html>

Interesting.  If you remove the text from #box2 and #box3 (and set
explicit heights, so you can see them), they do have exactly a 1:2
relationship.  Some quick testing shows that they're ignoring the
width:0 and instead using the minimum width of the text as their
preferred widths in the flex calculation.  This only happens if the
width property is less than the width of the text.

I'm not sure if that's supposed to happen or not - there isn't much
explanation of precisely how "preferred width" is computed, so I
assumed it was similar to shrink-wrapping and paid attention to width.

~TJ

Received on Tuesday, 11 May 2010 05:00:45 UTC