html - 如何强制flexbox最后一行的项目选择所有剩余高度（在flex-row模式下）？

Question

考虑到我们有这个代码（请测试它）：

.x{
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    background-color: #0bd;
    width: 420px;
    height: 220px;
    overflow: auto;
 }
 .x>*{
    width: 25%;
    height: 45px;
    border: solid 1px #fff;
    box-sizing: border-box;
 }
 .N, .L {
     width: 50%;
 }

<div class='x'>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div class='N'>N</div>
    <div class='L'>L</div>
</div>

我需要这样的东西：

.x{
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  background-color: #0bd;
  width: 420px;
  height: 220px;
  overflow: auto;
}
.x>*{
  width: 25%;
  height: 45px;
  border: solid 1px #fff;
  box-sizing: border-box;
}
.N, .L {
     width: 50%;
}
.N {
  height: 175px;
  background-color: #f0f;
}

<div class='x'>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div class='N'>N</div>
  <div class='L'>L</div>
</div>

要点：

1. 我们必须使用flex-flow: row.
2. （.NN 类）必须垂直填充所有剩余空间（剩余高度）。
3. 我们不应该使用嵌套元素。（而且我们根本无法更改此 HTML 代码。我们必须css仅使用它的纯代码。）。
4. 在我们的案例中，唯一的选择是flex-box.
5. 我们不能使用常量height或calc(100% - xxx)，因为我们没有xxx。
6. 我们可能有两行以上，并且.N可能出现在第三行（或第四行，...）。

非常感谢。

标签： htmlcssflexbox