Problems with block/inline layout when using old Flexbox (-moz-box)

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
8 years ago
5 years ago

People

(Reporter: mail, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-us) AppleWebKit/533.19.4 (KHTML, like Gecko) Version/5.0.3 Safari/533.19.4
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-GB; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13

See example: http://jsfiddle.net/t5nXV/

If you resize the viewing area in Firefox the bottom three children will fall inline with the first three, whereas in Safari they stay below.

I don't know which behaviour is "correct", but the Webkit behaviour is what I expect.

Reproducible: Always

Steps to Reproduce:
1. Visit http://jsfiddle.net/t5nXV/
2. Resize the "Result" viewing area (and maybe the window) wide enough to hold all children
3. Compare with Webkit
Actual Results:  
The bottom three children fall inline with the first three.

Expected Results:  
The bottom three children should stay below.
(Reporter)

Comment 1

8 years ago
Another example: http://jsfiddle.net/Z9Dhj/

In Firefox the .item divs are displayed inline and the text inputs aren't sized to the specified width. In Safari the divs are displayed block and the text inputs are sized to the specified width.
I'm not seeing the behavior you describe in either 3.6 or current trunk (both on Mac OS X 10.6) in a clean profile...

What's different between my setup and yours?
(Reporter)

Comment 3

8 years ago
I'm on Mac OS X 10.5.8, and I can reproduce the behaviour in a clean Firefox profile (FF 3.6).
I see the behavior described. This URL renders as "first linesecond line" in Firefox (all on one line), but on two separate lines in Chrome:
> data:text/html,<div style="display:-webkit-box;display:-moz-box">first line</div><div style="display:-webkit-box;display:-moz-box">second line</div>

So -moz-box appears to behave as an inline-level element.

Clarifying summary to indicate that this is for old-style flexbox, not the actual new CSS3 flexbox ("display: flex")
OS: Mac OS X → All
Hardware: x86 → All
Summary: Problems with block/inline layout when using CSS3 Flexbox → Problems with block/inline layout when using old Flexbox (-moz-box)
Version: unspecified → Trunk
(workaround: just wrap each "-moz-box" element in a block)

Comment 6

5 years ago
Works fine with the new spec.
Wontfix?
You need to log in before you can comment on or make changes to this bug.