I want to fit as many divs as possible. Basically, create Russian nested dolls
Basically .dashboard > .lab > .colocation > .rack > buttons
This is what it looks like: notice there are a lot of empty spaces that could be filled. How to do that?
This is my attempt:
.dashboard { display: flex; width: 100%; height: 100%; flex-direction: column;}.lab { border: 1px solid brown; margin-bottom: 1rem; flex-wrap: wrap; max-width: 100rem; flex: 1; align-items: flex-start; span { color: brown; }}.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 I want: no empty spaces and packing as many divs and children as possible