Closed Bug 1709490 Opened 3 years ago Closed 3 years ago

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)

defect

Tracking

()

RESOLVED DUPLICATE of bug 1502610

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.

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
Component: Layout: Grid → Layout
Summary: Unexpected grid child size with negative margins in descendants → Firefox linewraps content where Chrome does not, with intrinsic sizing and exactly-canceling-out negative margin-right/padding-right on an inline element
Version: Firefox 88 → Trunk

Looks like this is the same issue described in bug 1502610 (per last sentence of bug 1502610 comment 17).

Status: UNCONFIRMED → RESOLVED
Closed: 3 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.