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.

Thanks

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

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>