清除flexbox列

Question

我有一个包含以下元素的flexbox布局：

标记：

​

.wrapper {
  display: flex;
  flex-direction: column;
  height: 10rem;
  background: grey;
  flex-wrap: wrap-reverse;
}

.row-1--last {
  margin-bottom: 100%;
}

<ul class="wrapper">
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1 row-1--last">
    <a>This is row 1</a>
  </li>
  <li class="row-2">
    <a>This is row 2</a>
  </li>
  <li class="row-2">
    <a>This is row 2</a>
  </li>
</ul>

​

我正在尝试找出一种方法来清除或使row-1的最后一个元素占据列中剩余的空间，以便具有类row-2的列表项将被转移到新行。

我尝试过不同的方法，比如给最后一个row-1元素填充或边距。我还尝试添加一个伪元素，并使该元素占据其余空间。

没有设置li元素的高度。

我不确定是否可以完全使用CSS来解决这个问题，或者我需要研究一下JS，也许可以计算一些高度。

在这里查看我的codepen：https://codepen.io/fennefoss/pen/PBNMwd