1739506 - {inc} Rendering issue involving display: flow-root, display: flex and float: right

Status: NEW

(Core :: Layout: Flexbox, defect)

Description

[Bartosz Dziewoński]

Attachment: flowroot-flex-float-testcase.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0

Steps to reproduce:

See attached test case.

Actual results:

The translucent blue rectangle overlaps the green rectangle. (see attached screenshot)

In other words, elements with "display: flex" placed inside an element with "display: flow-root" have incorrect width when rendered alongside elements with "float: right" and uneven widths.

Expected results:

The translucent blue rectangle should be less wide, so as to not overlap the green rectangle. (see attached screenshot)

Comment 1

[Bartosz Dziewoński]

Attachment: flowroot-flex-float-actual.png

Comment 2

[Bartosz Dziewoński]

Attachment: flowroot-flex-float-expected.png

Comment 3

[Bartosz Dziewoński]

Attachment: flowroot-flex-float-video.webm

Also, the rendering seems to be non-deterministic. After modifying the DOM using the inspector, or zooming in and out, I see the expected result, until I refresh the page. (see attached video)

Comment 4

[Bartosz Dziewoński]

Downstream bug report: https://phabricator.wikimedia.org/T294980

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Flexbox' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:TYLin, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 7

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Thank you for the bug report. I can reproduce this bug, and I confirm comment 3 that after zooming in or out, Firefox Nightly (2021-11-22) yields the expected result in comment 0.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jfkthame, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 9

[Jonathan Kew [:jfkthame]]

It looks like during the initial reflow, the display: flow-root element computes its width allowing for only the first of the floats; perhaps because it hasn't yet figured out that its height is such that it will actually impinge on the second float as well, and so needs to take account of that too.