1252257 - Flex-basis value of "0%" is not behaving like "auto" when containing block's main-size value is indefinite

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Tyler]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20160210153822

Steps to reproduce:

1. Open the demo https://jsfiddle.net/uwbhddxj/9/
2. Click run


Actual results:

The viewport is blank, because the <div> element has an effective height of 0. It should be a height of 100px.


Expected results:

Per the spec, flex elements with flex-basis of "0%", inside elements with an indefinite main-size value (like the demo's <body> element in this case), should behave like a flex-basis value of "auto".

This works in Chrome, but not in Firefox. 
Extended debugging discussion located here: http://chat.stackoverflow.com/transcript/message/29044830#29044830

Comment 1

[Tyler]

I'm unable to set the Component to Layout, that's not an option for some reason.

Comment 2

[Daniel Holbert [:dholbert]]

Sorry for the long turnaround on a response here.  But: I think Firefox is actually correct here now (not sure what the exact state was when this was filed).

(In reply to Tyler from comment #0)
> Expected results:
> 
> Per the spec, flex elements with flex-basis of "0%", inside elements with an
> indefinite main-size value (like the demo's <body> element in this case),
> should behave like a flex-basis value of "auto".

This isn't quite correct (or it's not correct anymore, if it was correct when this was filed). The spec actually says:

> 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
> used value for flex-basis is 'content'

So the used value is 'content' (in this case, the content height of the flex item, as if we had flex-basis:auto;height:auto).  And here, the content-height is 0.

So: the flex item's 'height:100px' does not come into play when resolving its flex-basis.  (It *would* come into play if we had "flex: 1 auto;height:100px". But that's not what we have -- we effectively have "flex: 1 content; height:100px".)

Note that we only just implemented support for the 'content' keyword (in Nightly 61), and Chrome still does not support it, so it may be a little confusing to try different examples using explicit 'content' here.  But even before we implemented 'content'-the-keyword, we basically implemented the correct behavior for cases where it's implied as the used value, which is why we got this "correct" (violating your expectations) even before we supported 'content'-the-keyword.

Comment 3

[Daniel Holbert [:dholbert]]

Here's the spec link for the spec quote in comment 2:
https://drafts.csswg.org/css-flexbox/#flex-basis-property