如何使div行填充可用高度

Question

我有一个简单的网页，其中包含多行。我希望能够使这些行平均填充可用空间（以及最小高度）。行数也是动态的。

代码如下：

.outer {
  display: block;
  overflow: auto;
  height: 100%;
}

.row {
  border: 1px solid blue;
  background-color: red;
  min-height: 120px;
}

<div class="outer">
  <div class="row">
    test 1
  </div>
  <div class="row">
    test 2
  </div>
  <div class="row">
    test 3
  </div>
  <div class="row">
    test 4
  </div>
  <div class="row">
    test 5
  </div>
</div>

颜色就在那里，所以我们可以看到正在发生的事情。

任何帮助将不胜感激。关于SO的其他问题对我的具体案例没有帮助。或至少我找不到能做到这一点的：）

Answer 1

.outer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.row {
    flex: 1;
}