Можно ли отображать элементы flexbox в двух строках вместо одного?

Question

Что я пытаюсь сделать здесь, так это то, что я хочу использовать две строки для отображения неопределенного количества элементов.Я буду использовать вертикальную прокрутку, чтобы показать переполненные элементы.Если я использую ниже CSS, то он отображает элементы в одну строку.Я хочу знать, возможно ли использовать 2 строки вместо одной или есть какой-нибудь хак для достижения этой цели с помощью flexbox?

.items-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

<div class="items-list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  .......
</div>

Я часами пытался найти решение или ответ, если это вообще возможно сделать с помощью flexbox.Любая помощь будет принята с благодарностью.

Answer 1

Вы можете сделать это, используя сетку CSS:

.items-list {
  display: grid;
  grid-template-rows: 50px 50px; /* 2 rows of 50px */
  grid-auto-flow: column;  /* a column flow */
  grid-auto-columns:100px; /* each column will 100px of width */
  grid-gap: 5px;
  overflow: auto;
}
.item {
  border:2px solid red;
}

<div class="items-list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>