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

RESOLVED INVALID

Status

()

RESOLVED INVALID
3 years ago
11 months ago

People

(Reporter: hibbard.tyler, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
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
(Reporter)

Updated

3 years ago
OS: Unspecified → Windows 7
Hardware: Unspecified → All
(Reporter)

Updated

3 years ago
Component: Untriaged → Untriaged
OS: Windows 7 → All
Product: Firefox → Core
(Reporter)

Comment 1

3 years ago
I'm unable to set the Component to Layout, that's not an option for some reason.
(Reporter)

Updated

3 years ago
Component: Untriaged → Layout
Status: UNCONFIRMED → NEW
Ever confirmed: true
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.
Status: NEW → RESOLVED
Last Resolved: 11 months ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.