971145 - Cascading flex box display wrong

Status: RESOLVED DUPLICATE of bug 939905

(Core :: Layout, defect)

Description

[Ross]

Attachment: Firefox display wrong when cascading flex boxes.rar

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140127194636

Steps to reproduce:

It should display the same as Google Chrome and IE11, when cascading flex boxes with different flex-flow-direction.

Environment: Windows 7 x86, Firefox 27.0, Google Chrome 32.0, IE11

Note: 
1. The outter flex box (This box has two children flex boxes): 
"margin":"0",
"border":"0",
"padding":"0",
"width":"320px",
"height":"100%",
"background":"cyan",
"display":"flex",
"flex-flow":"row nowrap",
"align-items":"center",
"justify-content":"space-between"

2. The first inner child flex box:
"margin":"0", 
"border":"0", 
"padding":"0",
"width":"120px",
"height":"100%",
"background":"yellow",
"display":"flex",
"flex-flow":"row nowrap",
"align-items":"center",
"justify-content":"space-around"

3. The second inner child flex box (this box has two children box without flex defined): 

"margin":"0", 
"border":"0", 
"padding":"0",
"width":"200px",
"height":"100%",
"background":"green",
"display":"flex",
"flex-flow":"column nowrap",
"align-items":"center",
"justify-content":"flex-start"


Actual results:

Firefox 27.0 display wrong, it discards the second inner flex box's flex-flow-direction definition. See the attached wrong screenshot.


Expected results:

Firefox should display the same as Google Chrome and IE11. See the attached right screenshots when displayed in Chrome and IE11

Comment 1

[Ross]

Attachment: Cascading Flex bos wrong in firefox 27.0.png

Comment 2

[Ross]

Attachment: Cascading Flex bos right in Google Chrome 32.png

Comment 3

[Ross]

Attachment: Cascading Flex bos right in IE11 windows 7.png

Comment 4

[Daniel Holbert [:dholbert]]

@Ross: Thanks for filing the bug!

Could you attach an HTML file that reproduces the bug for you, to make sure we're looking at the same thing?
(or, failing that, could you post a URL of a live testcase somewhere)

Comment 5

[Daniel Holbert [:dholbert]]

(it looks like comment 0 describes the steps to create such a testcase, but it sounds like you've already got such a testcase, and it's easier if you attach it rather than the folks reading this bug trying to independently recreate it)

Comment 6

[Ross]

Attachment: Orginal Test Html file uploaded for testing Test.html

Orginal Test Html file uploaded for testing.

Comment 7

[Alice0775 White]

This seems to be fixed in Firefox28beta and later by Bug 939901.

Comment 8

[Daniel Holbert [:dholbert]]

Or more specifically, it would have been fixed by bug 939905 (which added support for the "flex-flow" shorthand, which the testcase [and the style in comment 0] uses.)  Before that bug landed, we'd reject "flex-flow" as invalid.

--> Duping to bug 939901.

@Ross: thanks again for the bug report and the testcase. Note that if you happen to be running up against this in actual web content that you're writing, note that you should be able to make it work by just replacing "flex-flow" with "flex-direction" (and drop any "nowrap" suffixes).

(flex-flow is simply a shorthand that includes both "flex-direction" and "flex-wrap" in one.  If you don't actually need "wrap" behavior, then "flex-direction" is equivalent.)

Comment 9

[Daniel Holbert [:dholbert]]

[sorry, I meant to dupe to bug 939905 of course.]

Comment 10

[Ross]

@ Daniel Holbert:

Thanks for your suggestion, It works right when replace flex-flow with flex-direction.