colocation name
colocation name
colocation name

CSS flexbox fit in as many as possible without any empty space

21 views Asked by At

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;
  }
}

This is what it looks like enter image description here

But I want all the empty spaces to be filled and at top-left we have the label: enter image description here

jsfiddle

0

There are 0 answers