Let flex take up the minimum space required to show max columns of items
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I have a page that’s seperated in 2 columns with the 2nd column containing a flexbox. I would like the flexbox to show the maximum number of items (depending on the size of the screen) and leave no extra whitespace on the right of it. In other words the orange space should not extend past the green blocks in the example.
How could I achieve this?
Example of what I have:
.top {
display: flex;
background: black;
}
.c1 {
min-width: 50px;
background: yellow;
}
.c2 {
display: flex;
background: orange;
gap: 10px 10px;
flex-wrap: wrap;
}
.c3 {
background: yellow;
}
.card {
width: 150px;
height: 30px;
background: green;
border-radius: 20px;
}
<div class=’top’>
<div class=’column c1′>
</div>
<div class=’column c2′>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
</div>
</div>
display: flex;
background: black;
}
.c1 {
min-width: 50px;
background: yellow;
}
.c2 {
display: flex;
background: orange;
gap: 10px 10px;
flex-wrap: wrap;
}
.c3 {
background: yellow;
}
.card {
width: 150px;
height: 30px;
background: green;
border-radius: 20px;
}
<div class=’top’>
<div class=’column c1′>
</div>
<div class=’column c2′>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
<div class=’card’></div>
</div>
</div>
أضف إجابة