Layout issue with empty divs and css flexbox (-moz-box) style




7 years ago
4 years ago


(Reporter:, Unassigned)



Firefox Tracking Flags

(Not tracked)


(Whiteboard: -moz-box, URL)


(1 attachment)



7 years ago
User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b7) Gecko/20100101 Firefox/4.0b7
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b7) Gecko/20100101 Firefox/4.0b7

When using flexbox (-moz-box styles) and HTML5 doctype, empty <div> elements used in the composition of an element creates a layout issue.  The flexbox element is misaligned with respect to the top of the parent element. A 16px top margin gets implicitly inserted between parent and child element.

The workaround is to either remove the DOCTYPE header or insert non-breaking spaces into the empty div elements.

Also repros on Firefox 3.6.  While the margin issue is visible, it's not visible to Firebug. (Firebug shows the offsets, margins, padding, and sizes of inner and outer div elements as they should be).

Does not repro on Chrome 8.0.552.224

I wrote a very simple example page here that demonstrates the problem.

Reproducible: Always

Steps to Reproduce:
1. Create an outer div of any size (say 300x300)

2. Create an inner div to use width:100% height:100% display:-moz-box -moz-box-orient:horizontal.

3. Create 2 child elements within the inner div. One has a fixed width, the other gets stretched via -moz-box-flex:1 style.

4. Do not insert any content within the divs created above other than the nested child divs.

See sample page on:

Actual Results:  
Total outer div size is 16px larger than it should be. (300x316 in this example).  Child element is correct size, but shifted down within parent.  Hence, it appears there's a 16px margin.

Expected Results:  

No margin added.  Workarounds should not have to be applied.

Comment 1

7 years ago
Issue still occurs with latest nightly - Mozilla/5.0 (Windows NT 5.1; rv:2.0b9pre) Gecko/20101219 Firefox/4.0b9pre ID:20101219030346
Component: General → Layout
Keywords: html5
Product: Firefox → Core
QA Contact: general → layout
Whiteboard: -moz-box
I'd suggest attaching the testcase to this bug using the "Add an attachment" link.
And this isn't html5; there is no flexbox in html5.
Keywords: html5

Comment 4

7 years ago
Created attachment 499476 [details]
Sample html source file demonstrating css flexbox issue with empty divs (identical to what's on web)

Comment 5

7 years ago
attachment added.


7 years ago
Attachment #499476 - Attachment mime type: text/plain → text/html

Comment 6

7 years ago
Confirmed with 3.6.13 and Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b9pre) Gecko/20110103 Firefox/4.0b9pre ID:20110103030359

Renders fine in Chrome dev 10.x.
Ever confirmed: true

Comment 7

6 years ago
Still an issue with Mozilla/5.0 (Windows NT 5.1; rv:9.0a1) Gecko/20110827 Firefox/9.0a1 ID:20110827030801

Comment 8

4 years ago
Fixed with the new spec.
Summary: Layout issue with empty divs and css flexbox style → Layout issue with empty divs and css flexbox (-moz-box) style
You need to log in before you can comment on or make changes to this bug.