Taking up maximum space inside a box before wrapping? - html

Question

So I need to display a box (position absolute) above my page when clicking on some button designed, inside this box will be a list of "tags" which should be displayed in a row.
But my problem is that I cannot manage to make the tags wrap properly, taking the maximum space of the box. I want to display as many tags as possible in a single row.
Any idea if this is possible ?
https://jsfiddle.net/e18d2ajh/
.vectors {
display: inline-flex;
min-width: 20vw;
max-width: 50vw;
background-color: #333;
padding: 15px;
margin-bottom: 15px;
}
.vector {
display: flex;
padding: .35rem;
background-color: #c0c0c0;
margin-right: .5rem;
}
<h5>
with few boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
<h5>
with many boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>

Answer 1

Use flex-wrap property to wrap contents to next line
.vectors {
...
flex-wrap: wrap;
...
}
.vectors {
display: inline-flex;
flex-wrap: wrap;
min-width: 20vw;
max-width: 50vw;
background-color: #333;
padding: 15px;
margin-bottom: 15px;
}
.vector {
display: flex;
padding: .35rem;
background-color: #c0c0c0;
margin-right: .5rem;
}
<h5>
with few boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
<h5>
with many boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>

Answer 2

You need a flex-wrap: wrap for .vectors and a flex-grow: 1 for .vector so the children occupy empty space left in the row after wrapping. Note, that might look ugly for the last row, solution is using pseudo element. Summary:
.vectors {
flex-wrap: wrap;
}
.vectors::after {
content: '';
flex: 100 0 0;
}
.vector{
flex-grow: 1;
}
Here's the codepen

Answer 3

You could set max-width:max-content on .vectores with flex-wrap:wrap and it would do the trick, like so:
.vectors {
display: inline-flex;
min-width: 20vw;
max-width: max-content;
background-color: #333;
padding: 15px;
margin-bottom: 15px;
/* lines I added */
flex-wrap:wrap;
gap:.5rem;
}
.vector {
display: flex;
padding: .35rem;
background-color: #c0c0c0;
}
<h5>
with few boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
<h5>
with many boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>