W3C home > Mailing lists > Public > www-style@w3.org > May 2010

Re: [css-flexbox] Computation Algorithm

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Mon, 10 May 2010 21:40:06 -0700
Message-ID: <9550BB99DC3E44588E48B14A917A2C30@terra3>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: <robert@ocallahan.org>, <www-style@w3.org>


--------------------------------------------------
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:27 GMT