[cssom-view] [css-flexbox] Should scrolling area contain the last item's margin in flexbox?

[babatakao]

The spec ( https://drafts.csswg.org/cssom-view-1/#scrolling-area ) says the scrolling area contains the margin-edge of the descendants.

The right-most edge of the element’s right padding edge and the right margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.

However, all major browsers seems exclude the last item's right-edge-margin in display: flex; flex-direction: row box.

https://jsbin.com/bibezaloju/1/edit?html,css,js,output

	Chrome	Firefox	IE/Edge
inline-block	140, 100	120, 100	140, 100
block	100, 140	100, 120	100, 140
flex row	120, 100	120, 100	120, 100
flex column	100, 140	100, 120	100, 120

IE, Edge and Firefox also excludes the bottom-edge-margin of the last item in display: flex; flex-direction: column box. (Firefox also excludes last item margins in non-flex boxes.)

Are these just implementation bugs? Or, if there are any special rule for flexbox, shoud css-om-view-1 refer about it?

[fantasai]

The answer to this question is yes: #3653

So yeah, implementation bugs. Probably need to get fixed soon if we don't want to end up having to back that out due to webcompat. :/

[fantasai]

Drafted up some tests at web-platform-tests/wpt#23445

[fantasai]

Bugs reports:

• https://bugs.chromium.org/p/chromium/issues/detail?id=1081802
• https://bugzilla.mozilla.org/show_bug.cgi?id=1527539
• https://bugs.webkit.org/show_bug.cgi?id=218579

I think that's the best I can do here in the CSSWG repo. :) Just have to wait for follow-up from implemenations.

[codersjj]

Hi @fantasai
Has this bug been fixed now? I encountered the same issue in Chrome version 116.0.5845.111 as well.