Wrong width when using "flex-wrap: wrap", "width: max-content" and "column-gap" at the same time
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
People
(Reporter: jiazhen.ruan, Unassigned)
Details
Attachments
(2 files)
Snipaste
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0
Steps to reproduce:
The width of the flex-wrap element should be 170px, not 50px. By the way, this problem also exists in chrome, but the width is 150px.
Example link: https://codepen.io/vcxldk/pen/NWmLZQO
code:
<html>
<body>
<div class="container">
<div class="flex-wrap">
<div class="box">1 50*50</div>
<div class="box">2 50*50</div>
<div class="box">3 50*50</div>
<div class="box">4 50*50</div>
<div class="box">5 50*50</div>
<div class="box">6 50*50</div>
</div>
</div>
<style>
.container {
width: 100px;
height: 100px;
position: relative;
}
.flex-wrap {
position: absolute;
width: max-content;
height: 100%;
box-sizing: content-box;
background-color: gray;
display: flex;
flex-wrap: wrap;
flex-direction: column;
column-gap: 10px;
}
.box {
box-sizing: border-box;
width: 50px;
height: 50px;
border: solid 1px black;
color: white;
}
</style>
</body>
<html>
Actual results:
When using the following CSS attribute at the same time, the width of the elastic container cannot be stretched properly by the quilt element and the column gap:
width: max-content;
display: flex;
flex-direction: column;
column-gap: 10px;
flex-wrap: wrap;
Expected results:
The width of the flex-wrap element should be 170px。
|
||
Comment 1•5 months ago
|
||
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•5 months ago
|
||
|
|
||
Comment 3•5 months ago
|
||
I think this is essentially a dupe of bug 995020. We don't take the height constraint into consideration when determining the max-content width, for now at least, so that's why we optimistically size the flex container as if it didn't need to wrap.
Description
•