Overflowing or wrapping text in the elements with max-width: max-content, paddings and box-sizing: border-box inside the wrapper with grid-auto-columns: max-content
Categories
(Core :: Layout: Grid, defect, P1)
Tracking
()
Tracking | Status | |
---|---|---|
firefox107 | --- | verified |
People
(Reporter: safeone69+bugzilla, Assigned: tlouw)
Details
Attachments
(6 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36
Steps to reproduce:
Example code:
https://codepen.io/mw_codes/pen/jOYxvQN
Check the example on Firefox and the other browsers (Chrome etc.).
I created a wrapper that contains three <a> tags.
The wrapper has:
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
and there is more than enough space to display its child-elements in columns.
The <a> tag has:
max-width: max-content;
padding: 8px 16px;
box-sizing: border-box;
Actual results:
The grid auto columns won't count the inline padding to the element's width and the text inside <a> tags will wrap like there was not enough space to fit the text in one line.
When we add white-space: nowrap, the text will overflow.
When we change the box-sizing property from border-box (that counts paddings to the overall element's width) to content-box (that doesn't count paddings to the overall element's width) the problem disappears.
The bug appears only on Firefox.
The bug doesn't appear on Chrome.
Expected results:
The text inside <a> tags should not wrap to the next lines or overflow if there is enough space to fit every <a> tag inside the wrapper (just like in Chrome).
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Grid' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
Comment 2•3 years ago
|
||
Comment 3•3 years ago
|
||
Yeah, this looks kinda busted, thanks for the excellent test-case! This doesn't seem like a regression, if I change the max-width: max-content for max-width: -moz-max-content I can repro all the way to the beginnings of CSS grid.
Boris, you've done some work in intrinsic grid sizing in the past, any chance you can take a look? No worries if not :)
It seems something is incorrectly (or inconsistently at least) accounting for box-sizing. I don't see any obvious thing in the grid code yet, but this shouldn't be too hard to figure out with rr.
Comment 4•3 years ago
|
||
Updated•3 years ago
|
Assignee | ||
Updated•2 years ago
|
Comment 6•2 years ago
|
||
Comment 7•2 years ago
|
||
Assignee | ||
Comment 8•2 years ago
|
||
Fixes a bug where border box-sizing was not used. This affected
min-/max-content and fit-content values for min-/max-width.
Updated•2 years ago
|
Updated•2 years ago
|
Updated•2 years ago
|
Comment 9•2 years ago
|
||
There's a r+ patch which didn't land and no activity in this bug for 2 weeks.
:tlouw, could you have a look please?
If you still have some work to do, you can add an action "Plan Changes" in Phabricator.
For more information, please visit auto_nag documentation.
Updated•2 years ago
|
Comment 10•2 years ago
|
||
Tiaan do you have L3 access yet? If not you should get it. Lmk if you need me to land the patch for you :)
Assignee | ||
Comment 11•2 years ago
|
||
Making final change to the tests then I'll land it.
Comment 12•2 years ago
|
||
Updated•2 years ago
|
Comment 14•2 years ago
|
||
bugherder |
Updated•2 years ago
|
I managed to reproduce this issue on a 2022-10-09 Nightly build on macOS 12 using the testcases attached in the bug. Verified as fixed on Firefox 107.0b4(build ID: 20221023190001), Nightly 108.0a1(build ID: 20221023100414) on macOS 12, Windows 10, Ubuntu 22.
Description
•