Re: [css-flexbox] Different behaviour in FF and Chrome regarding flex-basis

On 07/23/2014 09:05 AM, Daniel Holbert wrote:
> I believe you're seeing the results of:
>  http://dev.w3.org/csswg/css-flexbox/#min-size-auto

I'm sorry, that wasn't correct -- after more testing, it seems that
Chrome (ver 38.0.2096.0 dev) doesn't support min-height:auto. (and an
explicit "min-height:0" doesn't affect their rendering of your
testcase). So, the min-height:auto feature is not what's responsible for
giving the flex container a nonzero height in Chrome. This is all true
of IE11, as well -- they match Chrome on this testcase, and it doesn't
change the rendering if I add "min-height:0" on the flex items.

So, I *think* the question here is just how the main size (height) of a
vertical flex container with "height:auto" should be determined.

In Firefox, when the height is indefinite, we establish it using the sum
of the hypothetical main sizes of its children.  (I thought this was in
the spec, but I can't find it at the moment; it's possible it was in an
older version, or just that I'm misrememebering.)

In contrast, it appears that Chrome and IE are determining it as the sum
of the 'height' values for the children, regardless of their flex-basis
values.  (In this case, the children's auto-heights are being used; but
if I set e.g. "height: 2px" on the children, then the flex container
seems to sum those specified heights instead. Again, this is all
ignoring the fact that we have flex-basis:0.)

The spec just says this about establishing the main size of the flex
container:
  # Determine the main size of the flex container using
  # the rules of the formatting context in which it participates.
http://dev.w3.org/csswg/css-flexbox/#algo-main-container

...and also this, about its intrinsic size:
 # The max-content main size of a flex container is the sum of
 # the flex container’s items' max-content contributions in the
 # main axis.
http://dev.w3.org/csswg/css-flexbox/#intrinsic-sizes

So, it looks like IE and Chrome are getting the height based on that
latter chunk of spec-text (with "max-content contribution" being the
'height' property), and summing those contributions to establish the
auto-height of the container.

Maybe this is what Firefox should be doing as well...

~Daniel

Received on Wednesday, 23 July 2014 18:45:48 UTC