如何在一定高度后将2列包装成4列？没有嵌套元素？

Question

我试图在一定数量的元素之后将一个元素（包含两列）包装到下一列中。

我通过嵌套flex容器实现了这一点，但还有其他方法吗？

body {
  background-color: darkGray;
}

.outer-container {
  width: 350px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: hidden;
}

.inner-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 200px;
  height: 400px;
  background-color: black;
  padding: 5px;
}

.item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 2px;
}

<div id="app"></div>
<div class="outer-container">
  <div class="inner-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="inner-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

我正在动态填充列，除了嵌套div之外还有其他方法吗？

这是期望的效果：