1097860 - Firefox Developer Edition doesn't respect height & width of flex items, with e.g. "flex: 1 1 auto"

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Kevin]

Attachment: flex-amples-ffde.jpeg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36

Steps to reproduce:

I created a flex box css test page showing the different scenarios possible.  


Actual results:

I noticed in FF-DE that it doesn’t respect the height of a child when the flex-direction is column and it doesn’t respect the width when it is row.


Expected results:

All other browsers in my tests, including FF, respect the height and width.

Comment 1

[:Gijs (he/him)]

Please provide your testcase. It sounds like this is part of the spec change regarding requiring min-height/min-width for some things, but it's impossible to tell without seeing your HTML/CSS.

Comment 2

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(In reply to Kevin from comment #0)
> I noticed in FF-DE that it doesn’t respect the height of a child when the
> flex-direction is column and it doesn’t respect the width when it is row.

Based on your description & the usages of "flex: 1 1 auto" in the screenshot, this sounds likely to be an expected result of bug 1032922.

In particular, if you have e.g. "flex: 1 1 auto; width: 50px", then it's actually *correct* that the 50px should be ignored, according to the current spec text. (But it didn't used to be correct.)

The "auto" value USED to mean "look at my width [or height] property", but now it means "auto-size me", and "main-size" is a new keyword that means "look at my width [or height] property".  This is a very recent spec-change, and it's not 100% settled yet, so stay tuned. But for the meantime, this behavior is correct per the spec.

Comment 3

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(See http://lists.w3.org/Archives/Public/www-style/2014Nov/0177.html for a summary of the current state of things.)

I'm resolving as INVALID, since I'm pretty sure that I'm understanding your report correctly, in which case the behavior is intended & required per spec. But if the spec changes, we will end up reverting to your expected behavior here. We did that on the beta channel in bug 1032922, to avoid shipping this before the spec has been completely settled.

In the meantime, you should be able to get predictable & interoperable behavior by just using styles like "flex: 1 1 50px" instead of e.g. "flex: 1 1 auto; width: 50px".

Comment 4

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(In reply to Daniel Holbert [:dholbert] from comment #3)
> But if the spec changes, we will end up reverting to your expected
> behavior here. We did that on the beta channel in bug 1032922, to avoid
> shipping this before the spec has been completely settled.

Sorry -- copypaste fail. Meant to say **bug 1093316** there.

Comment 5

[Kevin]

I added my example in the bug URL, but I'll repeat here too.

http://cssdeck.com/labs/nhwyafi9

Comment 6

[Kevin]

(In reply to Daniel Holbert [:dholbert] from comment #2)
> (In reply to Kevin from comment #0)
> > I noticed in FF-DE that it doesn’t respect the height of a child when the
> > flex-direction is column and it doesn’t respect the width when it is row.
> 
> Based on your description & the usages of "flex: 1 1 auto" in the
> screenshot, this sounds likely to be an expected result of bug 1032922.
> 
> In particular, if you have e.g. "flex: 1 1 auto; width: 50px", then it's
> actually *correct* that the 50px should be ignored, according to the current
> spec text. (But it didn't used to be correct.)
> 
> The "auto" value USED to mean "look at my width [or height] property", but
> now it means "auto-size me", and "main-size" is a new keyword that means
> "look at my width [or height] property".  This is a very recent spec-change,
> and it's not 100% settled yet, so stay tuned. But for the meantime, this
> behavior is correct per the spec.

Thanks for the explanation.

Comment 7

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Thanks for the testcase! Looks like it is indeed what I'd thought -- in the first example, the first element has "flex: 0 0 auto" and "width: 70px". As discussed above, it's correct (per current spec text) that the "70px" is ignored there (except as establishing an upper-bound for the element's implied minimum width).

I do wonder why we're wrapping the text, though (e.g. "Item 1" has a newline before the 1, for no clear reason).  I'm going to spin off a separate bug on that, unless there turns out to be a good explanation. (I'll mention the bug number here.)

Comment 8

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Filed bug 1097984 to cover that last oddity in comment 7.