Fw: Re: [css3-values] Proposal for auto fitting value for height and width

My idea was a bit different, smething like if an element had a width of 200px, a height of 50px, and 2 child divs were given width: fit and height: fit, both would be 50px tall, and 100 wide. But, I guess the flexbox model does it, however, I think flexbox is over complicating it some what, and that flexbox should be split into a shorthand box: for scaling and filling, and then optional alignment and ordering.



--
Adam Del Vecchio (Mobile)
President - Techo TechnologyOn 29 Apr 2010 1:40 p.m., Bert Bos <bert@w3.org> wrote: 

On Thursday 29 April 2010 01:04:33 Adam Del Vecchio wrote:



> I'd like to propose an auto fitting value that could be used with the

> height and width propertys.

>

> What this would do would have an object in the DOM fill all remaining

> space. If it is used with a child of the body element, it would fill

> the remaining screen space.

>

> Possibly something like:

>

> Height: fit; or width: fit; ?



The problem with this is that it leaves the renderer to guess which 

available space you mean. (Or, more precisely, it's the writers of the 

CSS specification who will have to guess what is meant in every 

situation.) There are no doubt simple cases, such as a fixed-size 

parent with two children of the same type, but there are plenty of 

difficult cases. E.g., if there is a float somewhere in the available 

space, do you want your element to take the available space *next to* 

the float or *below* it?



The approach taken by CSS so far (tables) and by the extensions we're 

working on (flexbox and templates) is to first make it explicit which 

elements vie for a given space. Once you know which elements are in the 

same row (or column), you can distribute the space over just those 

elements.



Next, to distribute the space properly, we probably need more than a 

keyword 'fit' that says whether an element is flexible or not. We 

probably need:



   a. Which elements to grow first and which next

   b. If several grow at the same time, how much each gets



You could then say, e.g., that, in a row A B C, element A has its 

intrinsic size and never grows, B has at least its intrinsic size but 

can grow to 20em, and C takes the space that is left once B is 

maximized.



Expressing (a) and (b) as new values on 'width' and 'height' probably 

leads to a difficult syntax, so the proposal in the flexbox module uses 

two separate properties: 'box-flex-group' (for a) and 'box-flex' (for 

b).



It may be that (b) is overkill and (a) is sufficient in practice. We'll 

have to see.



>

> Example, if an element directly opened after the body tag has an ID

> of #wrap and the stylesheet says wrap should have height: fit; then

> #wrap would fill the screen. If after #wrap is closed, and another

> element is opened with a heigt of lets say 100px, this element is

> pushed to the bottom, and the first element (located at the top) is

> given a height of browser window minus 100px. 



In flexbox syntax, this would be something like:



    BODY {min-height: 100%; display: vbox}

    #wrap {box-flex: 1} /* all others are 0 by default */



    <BODY>

      <DIV ID=wrap>...</DIV>

      <DIV>... this happens to be 100px high... </DIV>

    </BODY>



(The white space between the DIVs is automatically ignored.) Not in this 

example, but in the general case you may need to decrease some margins 

between elements as well, because margins in a vbox don't collapse.



The WG is studying if the same 'box-flex' and 'box-flex-group' 

properties can also apply to tables and templates. Flexbox might be 

just a special case of a table (viz., a table with only one row or 

column). That could look very similar:



    BODY {height: 100%; display: table}

    DIV {display: table-row}

    #wrap {box-flex: 1}



>

> Example 2, if an element has a height of 500px, and a child element

> has a height of 150px, and a sibling of that child has a height of

> fit, that element's height is 350px. 







Bert

-- 

  Bert Bos                                ( W 3 C ) http://www.w3.org/

  http://www.w3.org/people/bos                               W3C/ERCIM

  bert@w3.org                             2004 Rt des Lucioles / BP 93

  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Thursday, 29 April 2010 17:59:38 UTC