CSS "display:flex" adds some unwanted space

Is the picture below, we have a div container containing 5 items (icon + text). I would like to display those 5 items with always 3 items per column using flexbox. To do so, we can add flex-direction:column, flex-wrap:wrap and specify a height.

But, I would like the div container to adapt his height automatically to the height of the 3 items. So, for example, item height is 10px. Then, div container should automatically have a height of 30px.

I would like a response with flexbox in priority (in order to have a better understanding of them) but I’m open to other methods.


enter image description here

>Solution :

Flexbox works the other way around, it reacts to its parent size.
I would suggest to use grid here:

div {
 background: purple;

ul {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);

Leave a Reply