css flex-wrap, but vertically?

5 children elements

• equal widths
• varying heights

I would like to do EXACTLY what flex wrap row does, but VERTICALLY.

.container {  display: flex;  flex-wrap: wrap;  flex-direction: column;  gap: 5px;  border: 2px solid #000;  padding: 10px;}.box {  width: 80px;  height: 50px;  background-color: orange;}

<div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>

i would basically like to transpose the direction/axis of the wrap(so the wrap would go to the next column, when it reaches the vertical maximum of the parent container.)

all the vertical/column flexings don't create more than one column (wrap over to the next column)

image of what im talking about:

Image may be NSFW.
Clik here to view.

I have tried every combination/permutation of the flex styling params (for both the parent & children)

thanks!