Closed Bug 971145 Opened 10 years ago Closed 10 years ago

Cascading flex box display wrong

Categories

(Core :: Layout, defect)

27 Branch
x86
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 939905

People

(Reporter: rosschn, Unassigned)

Details

Attachments

(5 files)

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
Component: Untriaged → General
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)
Orginal Test Html file uploaded for testing.
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
Closed: 10 years ago
Resolution: --- → DUPLICATE
Flags: needinfo?(rosschn)
Keywords: testcase-wanted
[sorry, I meant to dupe to bug 939905 of course.]
@ 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.

Attachment

General

Creator:
Created:
Updated:
Size: