RE: [css-flexbox] Behaviour of percentage heights in column direction

> Tab thought that Chrome was doing the right thing here, but I have to say I
> much prefer the Firefox/IE behaviour. It seems very useful to be able to
> specify an explicit height on the root element of a widget, then use nested
> flexboxes within it and have everything flow down the layout hierarchy
> appropriately. Particularly, if you can't do this with an element whose height
> is controlled only by its "flex"
> property, then there are certain layouts that will be impossible (although grid
> might cover them).

I think that Chrome is not doing the right thing here. The spec for flex basis states the following [1]:

    # The flex basis is resolved the same way as ‘width’ in horizontal writing modes [CSS21]: percentage values of ‘flex-basis’ are resolved against the flex item’s containing block, 
    # i.e. its flex container, and if that containing block’s size is indefinite, the result is the same as a main size of ‘auto’. 
    # Similarly, ‘flex-basis’ determines the size of the content box, unless otherwise specified such as by ‘box-sizing’ [CSS3UI].

In your example all of the flex containers have a flex-direction of column so the "width" in the above statement is actually the height of the items. Also since we know that the height of the container is not indefinite those percentages should be resolved. I have simplified your example down to just one flex example so it is easier to see the problem in the Blink engine [2].

In regards to the slight difference between IE and FF, if you remove your border-box setting Firefox/IE render exactly the same and this is a known IE bug in regards to border-box and flex in some scenarios.

Thanks,
Greg

[1] http://dev.w3.org/csswg/css-flexbox/#flex-basis-property

[2] http://jsfiddle.net/WzD8f/3/

Received on Friday, 20 June 2014 21:09:30 UTC