Imagine having a list of items like the following:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
These items are typically displayed in a single column, one after the other:
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
What if you want to display these items in columns within a fixed height ul container, as shown in this image?
https://i.sstatic.net/w1eBt.png
The width of each item should be flexible, adjusting the column size as needed:
https://i.sstatic.net/X2weq.png
I've tried using floats and flexbox with wrapping, but haven't found a satisfactory solution. Any suggestions?