1742272 - Layout difference with display: flex with negative margin after float:left with width: 100%

Status: VERIFIED DUPLICATE of bug 1745310

(Core :: Layout: Flexbox, defect)

Description

[Tooru Fujisawa [:arai]]

Attachment: result.jpg

From https://github.com/webcompat/web-bugs/issues/93295

Steps to reproduce:

1. Run Firefox Nightly with clean profile
2. open https://labaru.my.id/download-category/download/

Actual result:
content under the header is not shown (attachment Firefox case)

Expected result:
content under the header is also shown (attachment Chrome case)

Safari also shows the content under the header.
I have minimal testcase. I'll post it in the next comment

Comment 1

[Tooru Fujisawa [:arai]]

Attachment: minimal testcase

Comment 2

[Tooru Fujisawa [:arai]]

Attachment: result for minimal testcase

Comment 3

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Daniel Holbert [:dholbert]]

Our behavior on the minimal testcase is correct.

Chrome agrees with us if you remove the negative margins -- they place the flexbox at the far right side of the page just like we do. Then, when you add negative margins to that element, it should (if anything) fit even better in that spot -- but chrome treats it as if that makes it no-longer-fit and they push it down below the float.

The Chrome bug is https://bugs.chromium.org/p/chromium/issues/detail?id=1141209 . So, assuming the minimal testcase captures what the site was doing, this means the site is (or was) depending on that Chrome bug, by accident.

(Having said that: I can't actually reproduce the issue at the original site, so perhaps they fixed or worked around the issue?)

Comment 5

[Daniel Holbert [:dholbert]]

I ended up filing bug 1745310 as a central place to track this behavior-difference. I'll dupe this over there.

Comment 6

[Daniel Holbert [:dholbert]]

Verified duplicate -- Nightly 102 (with bug 1745310's patch) renders the attached minimal testcase the same way that Chrome does (like the screenshot in comment 2).