964703 - margin-top/margin-bottom percent values are resolved to 0 when using flexbox with unspecified height

Status: RESOLVED DUPLICATE of bug 958714

(Core :: Layout, defect)

Description

[doodeec]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1807.0 Safari/537.36

Steps to reproduce:

Create flexbox with element wrapping (display: flex; flex-wrap: wrap) and define margin on flex elements (flex: 1 1 45%). Add more flex elements than can fit in one line

http://doodeec.com/web -> childs (.project) and wrapper (.portfolio)


Actual results:

Childs of flex wrapper have defined margin, but top and bottom margin gets ignored

tested with Aurora 28.0a2 (2014-01-27) and Nightly 29.0a1 (2014-01-27)


Expected results:

Top and bottom margin should not be ignored in case elements are displayed in the next row

Comment 1

[Daniel Holbert [:dholbert]]

(In reply to doodeec from comment #0)
> http://doodeec.com/web -> childs (.project) and wrapper (.portfolio)

I can confirm that, at that page, if I shrink the window such that only 2 boxes fit on the first line (and the 3rd "Coverflow widget" is pushed to its own line), Firefox does not show any margin between those two lines, whereas Chrome & Opera (Presto) do.

(I'm assuming that's the manifestation of the bug described in comment 0.)

Comment 2

[doodeec]

Yeah,I forgot to mention that to see the behavior on that exact page, the screen width has to be between 701-1200px, sorry about that

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase demonstrating this working correctly

I was worried that maybe margins on flex items might be completely broken in multi-line flexboxes, but that doesn't seem to be the case, as shown by this testcase (which renders with margins between the container and its items, and between the two rows of items). So things do work correctly at least in this simple case. :)

Comment 4

[doodeec]

Looks like it breaks only percentage margins... just tried to replace top/bottom margins with an exact pixel value and it was working correctly. So maybe I will edit the title and description of this bug, so it is more clear what is going on.

Comment 5

[Daniel Holbert [:dholbert]]

I just discovered that as well, and we're actually doing the correct thing (resolving percentage margins on flex items against the flex container's height, which itself is unresolved, which means the percent margins end up as 0.)

I assume you're comparing us against Chrome -- they do the wrong thing here and have a known bug.

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #5)
> I assume you're comparing us against Chrome -- they do the wrong thing here
> and have a known bug.

which is https://code.google.com/p/chromium/issues/detail?id=275327

Comment 8

[Daniel Holbert [:dholbert]]

See bug 958714 comment 3 for more info. (That comment applies to both margin and padding.)

Comment 9

[Daniel Holbert [:dholbert]]

Also, it turns out that "flex-wrap" (& making the items wrap per comment 1 and 2) doesn't actually influence this behavior at all -- it just makes it easier to see.  If you look closely, you can tell that Chrome is inserting more space than we are (e.g. between the projects and the <hr>), even at large page-widths where nothing is wrapping.

--> clarifying summary