Re: [css-flexbox] Computation Algorithm

--------------------------------------------------
From: "Tab Atkins Jr." <jackalmage@gmail.com>
Sent: Monday, May 10, 2010 8:45 PM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: <robert@ocallahan.org>; <www-style@w3.org>
Subject: Re: [css-flexbox] Computation Algorithm

> On Mon, May 10, 2010 at 8:43 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> Is there any combination of width/flex/box/overflow that will allow
>> to declare
>> one element to be twice wider than another?
>
> ..one { width: 0; box-flex: 1; }
> ..two { width: 0; box-flex: 2; }
>
> (Assuming both are children of a flexbox, of course.)

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>

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Tuesday, 11 May 2010 04:40:36 UTC