Firefox linewraps content where Chrome does not, with intrinsic sizing and exactly-canceling-out negative margin-right/padding-right on an inline element
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: marc, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36
Steps to reproduce:
The span in the example has negative margins. That causes the containing div, a grid child, to have a size smaller than expected. That in turn causes unexpected wrapping.
Actual results:
See https://codepen.io/fluidsonic/pen/xxqKJbm
Expected results:
The same example is laid out differently in Google Chrome.
There is no wrapping: https://codepen.io/fluidsonic/pen/xxqKJbm
I am no certain what behavior is correct according to the standard.
Comment 1•3 years ago
|
||
This is more generally an issue about intrinsic sizes -- it's not specific to grids / grid-items.
It also seems to only affect margin-right
/ padding-right
.
Here are two reduced testcases, one with margin-left/padding-left, and the other with margin-right/padding-right. Chrome renders them exactly the same, while Firefox linewraps the *-right
one.
data:text/html,<div style="border:1px solid black;display:inline-block;height:50px"><span style="margin-left:-20px; padding-left:20px">aaa bbb
data:text/html,<div style="border:1px solid black;display:inline-block;height:50px"><span style="margin-right:-20px; padding-right:20px">aaa bbb
Comment 2•3 years ago
|
||
Looks like this is the same issue described in bug 1502610 (per last sentence of bug 1502610 comment 17).
Description
•