1893438 - flex-wraps leads to incorrect layout with non-integer width

Status: RESOLVED DUPLICATE of bug 1893127

(Core :: Layout: Flexbox, defect)

Description

[Rägnar O'ock]

Attachment: bug-ff.html

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

Steps to reproduce:

when setting up a flex box such as :

• the container have a decimal with with a 2 decimal places (for example 1000.91px)
• the container is set to wrap (flex-wrap: wrap)
• the flex items have their width set as a calc on the container with a percentage minus an integer number of pixels (for example calc(50% - 8px) )
• the flex items have a margin set to half of the value that was substracted from the width (here 4px / .25rem)

see attached file for an example of such a broken case (and one that works, without the decimal width)

Actual results:

the items wrap to a column instead of a grid

Expected results:

the flex items should end up as a grid (for the described case)

Comment 1

[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 correct in case you think the bot is wrong.

Comment 2

[Alice0775 White]

I can reproduce the issue on Nightly127.0a1 Windows11.

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=cfa733c700c170913bdfa72ca88759e93bfc0b95&tochange=09a1b473f8dab1609e2ca9ae45ead6a8300d9a78

Comment 3

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

Set release status flags based on info from the regressing bug 1881220

:emilio, since you are the author of the regressor, bug 1881220, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Thanks, this "subtract half the margin" from the width is essentially the same issue as bug 1893127. Workaround would be to use round(down, ..., 1px) as described there. I'm not sure yet what the best solution here would be...