Cascading flex box display wrong

RESOLVED DUPLICATE of bug 939905

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 939905
4 years ago
4 years ago

People

(Reporter: Ross, Unassigned)

Tracking

27 Branch
x86
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments)

(Reporter)

Description

4 years ago
Created attachment 8374305 [details]
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
(Reporter)

Comment 1

4 years ago
Created attachment 8374306 [details]
Cascading Flex bos wrong in firefox 27.0.png
(Reporter)

Comment 2

4 years ago
Created attachment 8374307 [details]
Cascading Flex bos right in Google Chrome 32.png
(Reporter)

Comment 3

4 years ago
Created attachment 8374308 [details]
Cascading Flex bos right in IE11 windows 7.png
(Reporter)

Updated

4 years ago
Component: Untriaged → General

Updated

4 years ago
Component: General → Layout
Product: Firefox → Core
@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)
Flags: needinfo?(rosschn)
Keywords: testcase-wanted
(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)
(Reporter)

Comment 6

4 years ago
Created attachment 8374604 [details]
Orginal Test Html file uploaded for testing Test.html

Orginal Test Html file uploaded for testing.

Comment 7

4 years ago
This seems to be fixed in Firefox28beta and later by Bug 939901.
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.)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 939901
Flags: needinfo?(rosschn)
Keywords: testcase-wanted
[sorry, I meant to dupe to bug 939905 of course.]
Duplicate of bug: 939905
(Reporter)

Comment 10

4 years ago
@ Daniel Holbert:

Thanks for your suggestion, It works right when replace flex-flow with flex-direction.
You need to log in before you can comment on or make changes to this bug.