[css-overflow-3] Define how child margin-boxes contributes to scrollable overflow (ISSUE 6)

[MatsPalmgren]

https://drafts.csswg.org/css-overflow-3/#scrollable

The UA may additionally include the margin areas of boxes for which it is the containing block.
The conditions under which such margin areas are included is undefined in this level.
ISSUE 6. This needs further testing and investigation; is therefore deferred in this draft.

Firefox and Chrome handles margins differently (see testcases in bug 1527539). This might lead to web-compat problems.
It looks like Chrome includes the block-end margin of children when calculating the overflow for Grid and Flexbox layout, whereas Firefox doesn't. Both includes it in block layout though, well at least in most cases... (exact details TBD)

(Fwiw, the relevant block layout code in Gecko lives here in case anyone wants to decipher when the margin is included in blockEndEdgeOfChildren there.)

[upsuper]

It's worth checking with Chrome team about their behavior of LayoutNG, their next generation layout engine. I have heard that for many cases, they have different behavior than their current engine.

[emilio]

cc @kojiishi @bfgeek, do you know what does LayoutNG do here?

[fantasai]

Probably should include margins here, alongside padding. Same principle: authors expect spacing to be there when they request spacing, regardless of which side of the scrollbox the item is on. Agenda+ to discuss.

Previous resolutions related to this topic: #3665

[css-meeting-bot]

The CSS Working Group just discussed margins and scrollable overflow, and agreed to the following:

• RESOLVED: for flex and grid, margins contribute to overflow

The full IRC log of that discussion

<fantasai> Topic: margins and scrollable overflow
<fantasai> github: https://github.com//issues/3653
<fantasai> fantasai: ....
<fantasai> florian: For all things where we don't have a legacy constraint, I'm in favor of including margins, and this is one of them
<florian> fantasai: for blocks we cannot just include the margins, because compat, but for grid and flex we don't have this problem
<florian> fantasai: so when you put overflow on things, and have margins, authors expect them to show up
<fantasai> [fantasai was explaining why spacing specified by the author should be included in scrollable overflow -- it's used for spacing, and needs to provide that spacing between item and bottom/right edges of scroll container]
<fantasai> [ but have compat issues with block containers, would create too many unexpected scrollbars; so adapting for grid flexbox only ]
<florian> proposed resolution: for flex and grid, margins contribute to overflow
<florian> RESOLVED: for flex and grid, margins contribute to overflow
<fantasai> end topic
<fantasai> github: https://github.com//issues/3653
<fantasai> end topic