float and old flexbox (-moz-box-pack) don't play well together

RESOLVED WORKSFORME

Status

()

RESOLVED WORKSFORME
8 years ago
3 years ago

People

(Reporter: oliver, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-gb) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

If a container div is configured to display contents centred vertically and horizontally using the flexbox (as in the URL), adding 'float:left' or 'float:right' to the container breaks the centering. Content will now display top left.

Reproducible: Always

Steps to Reproduce:
1. Go to http://playground.html5rocks.com/#flexible_box_model:_center_stage
2. In the CSS for .centerbox, add 'float: left;' or 'float: right'
3. Press 'Run Code'

Actual Results:  
Contents of .centrebox moves to top left of .centrebox

Expected Results:  
The green .centrebox should float to the left or right of the screen but *contents* should still be centred vertically and horizontally within it

Comment 1

5 years ago
Fixed with the new spec.
Component: General → Layout
Product: Firefox → Core
Summary: float and flexbox (-moz-box-pack) don't play well together → float and old flexbox (-moz-box-pack) don't play well together
URL is 404, per the description I came up with http://dabblet.com/gist/1a5d8932816db9e3002f but I don't know if it's really right. However, based on that Dabblet demo it seems to work. 

Oliver: do you happen to have a test, or do you remember the issue?
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Flags: needinfo?(oliver)
Resolution: --- → WORKSFORME
(Reporter)

Comment 3

3 years ago
I'm afraid I can't remember the specifics of where I encountered it, but yes that looks good to me. Ta.
Flags: needinfo?(oliver)
You need to log in before you can comment on or make changes to this bug.