html - 如何使 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 的其他问题对我的具体情况没有帮助。或者至少我找不到一个这样做的:)

标签： htmlcss

Answer 1

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