Created attachment 446248 [details] testcase 1 STR: 1. Load attached testcase. (also available on jsfiddle: https://jsfiddle.net/dholbert/ujphfkqz/ ) EXPECTED RESULTS: Case 1 and Case 2 inside of the testcase should look the same. ACTUAL RESULTS: In "Case 2", the "A B" text is pushed down, for no clear reason. The only difference between Case 1 and Case 2 is: in Case 2, the "A B" element has a *negative margin*. So if anything, it should fit even better; there should be even less reason to push it down. Chrome has the same bug, tracked in https://bugs.chromium.org/p/chromium/issues/detail?id=1141209 . Firefox gives EXPECTED RESULTS.
Created attachment 446249 [details] testcase 2 (using display:flow-root instead of flex) Note: testcase 1 used flexbox, but as discussed on the chromium bug report, this isn't specific to flexbox; you can reproduce it with 'display:flow-root' as well, for example. Here's a version using 'display: flow-root'.
<rdar://problem/86189973>
For reference, I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1745310 on the Firefox side, as a place to aggregate webcompat issues that we've run into as a result of this interop issue.
I've done some more investigation and I actually think the WebKit/Blink behavior makes some sense here, per https://bugzilla.mozilla.org/show_bug.cgi?id=1745310#c9 . And the web apparently depends on it (per the various WebCompat dupes over there). So, we can close this one as INVALID. But while investigating that, I found a WebKit-specific version of this behavior that makes less sense and that I suspect the web does *not* depend on, and I filed that as: https://bugs.webkit.org/show_bug.cgi?id=239976