Styling Issue on Firefox and Edge

[mrluit]

Styling Issue on Firefox and Edge

[MrLuit]

I did some research and this turned out to be Firefox and Edge handling percentages on flex containers differently from the way Chrome, Safari, and Opera are doing it. The W3C CSSWG, Microsoft, and Mozilla have recently adopted Google's behavior and such this should be fixed as of Firefox 60 (fully released as of May 9) and Edge 42.17134 (released as of April 30).

Quoting @atanassov (Edge; 24 Jan 2018):

As I stated during the WG discussion, our intention in Edge is to implement the blink and webkit behavior, i.e. resolve padding/margin-top/bottom values against the available inline size (width). Our decision is driven solely due to the compatibility issues experienced by our users.

Quoting @dholbert (Firefox; 25 Jan 2018):

We're going to change as well (away from the symmetric behavior, to the inline-axis behavior).

Sources

• "How should we resolve percentage margins and padding on grid and flex items?"
• CSS WG thread
• Mozilla discussion
• Edge discussion
• Full W3C mailing list
• Heights for flexbox children intrinsically-sized with CSS are not computed properly in Firefox

---

I'm closing this issue for now, if someone wants to add something to the discussion feel free to reopen it