Wrap items to the next column when height is overflowing?-CodePudding

I have a container with items inside it.

This container has a height set. I'd like to wrap the items inside this container to a new column by maintaining the order of them to the next column. How do I do this?

For example, if I have 5 items, I'd like to wrap them like this:

1 4
2 5
3

and not like

1 2 
3 4 
5

Here is a photo for a reference:

From this photo, I'd like to create a new column with the 11th and 12th item

CodePudding user response：

You can use flexbox:

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 20rem;
  width: 20rem;
  border: 1px solid black;
  padding: 5px;
  gap: 5px;
}

.item {
  font-size: 5rem;
  border: 1px solid black;
  text-align: center;
}

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