1612401 - Absolutely positioned flex item leaves a gap

Status: RESOLVED FIXED

(Core :: Layout: Flexbox, defect, P3)

Description

[Florens Verschelde :fvsch]

Attachment: test case screenshot

STR:

<div style="display: inline-flex; gap: 100px; background: lime;">
  <span style="position: absolute;">A</span>
  <span>B</span>
  <span>C</span>
</div>

Expected result:

• A 100px gap between B and C.

Actual result:

• One 100px gap between B and C, and another one after C.

Note: I haven't checked the spec for what was supposed to happen (and not sure I would understand the language). That extra gap at the end just feels buggy. I expected that absolutely positioned elements would not participate in gaps.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Good catch! I think this is a valid bug. We're probably calculating the flex container's hypothetical size incorrectly here:
https://searchfox.org/mozilla-central/rev/2e355fa82aaa87e8424a9927c8136be184eeb6c7/layout/generic/nsFlexContainerFrame.cpp#5216-5236

We're adding n-1 gaps (where n=number of in-flow child frames), and we need to exclude the 0-sized nsPlaceHolderFrame children when we do that.

Comment 2

[Daniel Holbert [:dholbert]]

So in particular, that main loop in nsFlexContainerFrame::IntrinsicISize (that I linked above) probably wants something like the following, near its start:

if (childFrame->IsPlaceholderFrame()) {
  continue;
}

This is analogous to the similar placeholder check in nsFlexContainerFrame::GenerateFlexLines() (where we're doing actual layout of the children).

I'll bet that change will fix this, or get it closer to fixed.

ni=sean to assign someone here, rather than fixing this myself, in the interests of spreading flex knowledge around. :) I'll gladly mentor here.

Comment 3

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Bug 1612401 - Prevent absolute-positioned children from contributing gap size to flexbox's inline-size. r?dholbert

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0f408c398c28
Prevent absolute-positioned children from contributing gap size to flexbox's inline-size. r=dholbert

Comment 5

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/21583 for changes under testing/web-platform/tests

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 7

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/0f408c398c28

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot