how to make the content of a div go to the next column by exceeding the height of this div

Question

I apologize if I have not formulated the question well, I hope to make myself understood. basically I have a list of elements, these are distributed in each line. I would like that when this line is going to exceed the total size of the div, the list will continue in the space available in front.

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

div
{ 
 border: 1px solid red;
 height: 100px;
 width:300px;
}

how can I do it?

https://jsfiddle.net/ug0f38b1/

Answer 1

I'm using flexbox to solve this with the direction set to column. You need the height of the ul to fill the parent container so it knows when to break.

The items are naturally distributed as the list grows.

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  margin: 0;
}

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

jsFiddle

Adjusting column spacing

One nice thing about using flexbox for this is that we can set the ul to be inline-flex which allows easy control over the column spacing.

jsFiddle