I want to fit as many divs as possible. No empty spaces using flexbox.
<div class="colocation">
<span>colocation name</span>
<div class="rack"><span style="text-align: center;">rack name</span>
<div class="vstack">
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-info btn-sm">X</button>
</div>
</div>
<div class="rack"><span style="text-align: center;">rack name</span>
<div class="vstack">
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-dark btn-sm">X</button>
<button type="button" class="btn btn-info btn-sm">X</button>
</div>
</div>
</div>
This is my attempt:
.colocation {
border: 1px solid blue;
flex-wrap: wrap;
display: flex;
max-width: 50rem;
flex: 1;
align-items: flex-start;
span {
color: blue;
}
}
.rack {
border: 1px solid red;
width: 5rem;
flex: 1;
span {
color: red;
}
}
But I want all the empty spaces to be filled and at top-left we have the label:

