Is it possible to display flexbox items in two rows instead of one?

Question

What I\'m trying to accomplish here is, I want to use two rows to display uncertain amount of items. I will use vertical scroll to show overflowed items. If I use below css then

Answer 1

You can do this using CSS grid:

.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>

Related question to get another kind of layout: Can I use css-grid to display an unknown number of items, in left-to-right reading order, over two rows?