Issue with flexbox in Nightly Firefox when flex item has 100% width
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
People
(Reporter: duncangleeddean, Unassigned)
References
Details
Attachments
(3 files, 2 obsolete files)
flex-basis-width.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.16; rv:87.0) Gecko/20100101 Firefox/87.0
Steps to reproduce:
Simple reproduction (compare between Chrome, stable Firefox (85.0) and Firefox Nightly (87.0a1):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Flexbox flex basis bug</title>
<style>
div {
display: flex;
max-width: 400px;
}
div > img {
flex: 0 0 20%;
}
</style>
</head>
<body>
<div>
<img
src="https://placekitten.com/400/300"
alt="Cute kitten looking lovingly at you"
/>
</div>
</body>
</html>
Actual results:
The flex item width is much less than in Chrome and stable Firefox.
See attachment (Squares are 600 x 600 px viewports).
Expected results:
The flex item width should not have changed from a previous browser version.
|
||
Comment 1•5 years ago
|
||
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 3•5 years ago
|
||
Hi Duncan,
Thanks for the report, but I don't see the actual results on Firefox Nightly (2021-02-03). The image on Nightly is as large as on stable Firefox 85. Could you check whether the testcase can reproduce what you see?
|
Reporter | |
Comment 4•5 years ago
|
||
Hi Ting-Yu. Thanks for your response.
Seems I had left out a vital property in the example (the img element needs 100% width):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Flexbox flex basis bug</title>
<style>
div {
display: flex;
max-width: 400px;
}
div > img {
flex: 0 0 20%;
width: 100%;
}
</style>
</head>
<body>
<div>
<img
src="https://placekitten.com/400/300"
alt="Cute kitten looking lovingly at you"
/>
</div>
</body>
</html>
| Comment hidden (obsolete) |
|
|
||
Comment 6•5 years ago
|
||
Attached the testcase in comment 4 (with a red border added to flex container).
|
|
||
Comment 7•5 years ago
|
||
Thanks Duncan! Now I see the actual result described in comment 0.
This is expected result of bug 1585485, which implements [1]. The percentage width: 100% on the image flex item (which is compressible [2]) makes the min-width:auto resolved against 0. The item also has flex-grow:0 preventing it from being stretched, so the final resolved width is the flex-basis:20%, which is 80px.
I add another testcase that has <input> added as an flex item. Both <input> and the image should have the same width.
[1] https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution
[2] https://drafts.csswg.org/css-sizing-3/#min-content-zero
|
|
||
Comment 8•5 years ago
|
||
Daniel, I'd love to have your thoughts about comment 7. If the analysis looks good to you, I'll file bugs for blink and webkit.
|
|
Reporter | |
Comment 9•5 years ago
|
||
(In reply to Ting-Yu Lin [:TYLin] (UTC-8) from comment #7)
Created attachment 9201228 [details]
1690635-2.htmlThanks Duncan! Now I see the actual result described in comment 0.
This is expected result of bug 1585485, which implements [1]. The percentage
width: 100%on the image flex item (which is compressible [2]) makes themin-width:autoresolved against 0. The item also hasflex-grow:0preventing it from being stretched, so the final resolved width is theflex-basis:20%, which is 80px.I add another testcase that has
<input>added as an flex item. Both<input>and the image should have the same width.[1] https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution
[2] https://drafts.csswg.org/css-sizing-3/#min-content-zero
Thanks, Ting-Yu! I had a feeling this was for spec compliance as it does indeed seem more natural. Would be great to have tracking bugs for WebKit and Blink.
|
||
Comment 10•5 years ago
|
||
(In reply to Ting-Yu Lin [:TYLin] (UTC-8) from comment #8)
Daniel, I'd love to have your thoughts about comment 7. If the analysis looks good to you, I'll file bugs for blink and webkit.
Looks good to me, yeah. Thanks!
|
|
||
Comment 11•5 years ago
|
||
Blink and webkit issues filed. I'm closing this bug as INVALID.
https://bugs.chromium.org/p/chromium/issues/detail?id=1174924
https://bugs.webkit.org/show_bug.cgi?id=221450
Duncan, thanks again for filing this bug.
Description
•