Flexbox - Как перейти к автоматическому переходу к следующему столбцу?

Question

Я хотел бы построить flexbox со столбцом направления.Моя проблема заключается в том, что элементы должны перейти к следующему столбцу, когда первый столбец (представление) заполнен столбцом.Элементы будут добавлены динамически.

  <div class="container">
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
</div>

    .container{
  display: flex;
  flex-direction: column;
}

.item{
  display: table;
  border: 1px solid blacK;
  height: 200px;
  width: 200px;
}

https://jsfiddle.net/snrz7td3/1/

как-то так.

введите описание изображения здесь

Answer 1

Вы должны обернуть свой контент в гибкий контейнер.Помните, что высота вашего контейнера должна быть фиксированной.

.container{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   max-height: 800px; // set height according to your need
}

Answer 2

Ваш контейнер должен иметь определенную высоту, а затем вы можете использовать flex-wrap, чтобы он продолжал переходить к следующему столбцу