I am working on a control generated in React (HeroUI). The control gets generated as a flexdiv and I am trying to minimize its width when items are being wrapped into several rows.
As MRE, I created this JSFiddle. Depending on the width or your display/browser, you could get:
Image may be NSFW.
Clik here to view.
What annoys me is the extra blue area on the right of item 4 and item 8.
I am trying to:
Reduce the container's width to get rid of that extra space.
I would like the container to have the minimal sensible (more about that later) width, though if it only looks that way, that would be fine.If possible, force it to be 3x3 items.
The layout in the screenshot does not work with less than 3 rows, so having 3x3 items would further decrease the width without increasing the height.
I have tried a few approaches to solve this question, to no avail.
Among these, width:min-content indeed minimizes the container width but is too aggressive: it finds the absolute minimum width of the container by placing all the items in 1 column when I am trying to find the minimal width without changing its optimal height.
Basically, it behaves as if I had set flex-direction: column;
Because of what the div looks like in the rest of the actual page, dynamically stretching items, increasing the gap between them or changing their horizontal alignment to reduce/eliminate the extra space is not what I want to do.
Is there a way to do both points 1. and 2.? Or at least 1.?
