All users were logged out of Bugzilla on October 13th, 2018

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

RESOLVED DUPLICATE of bug 958714

Status

()

RESOLVED DUPLICATE of bug 958714
5 years ago
5 years ago

People

(Reporter: dusan.bartos13, Unassigned)

Tracking

Trunk
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
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
(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.)
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Product: Firefox → Core
Version: 28 Branch → Trunk
(Reporter)

Comment 2

5 years ago
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
Created attachment 8367136 [details]
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. :)
(Reporter)

Comment 4

5 years ago
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.
(Reporter)

Updated

5 years ago
Summary: margin-top/margin-bottom ignored when using flexbox flex-wrap property → margin-top/margin-bottom set in percent values are ignored when using flexbox flex-wrap property
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.
(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
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 958714
See bug 958714 comment 3 for more info. (That comment applies to both margin and padding.)
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
Summary: margin-top/margin-bottom set in percent values are ignored when using flexbox flex-wrap property → margin-top/margin-bottom percent values are resolved to 0 when using flexbox with unspecified height
You need to log in before you can comment on or make changes to this bug.