Как заставить элементы последней строки гибкого бокса выбирать всю оставшуюся высоту (в режиме гибкой строки)?

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. .N (класс N) должен заполнять все оставшееся пространство по вертикали (оставшаяся высота).
3. Мы не должны использовать вложенные элементы. ( И мы не можем изменить этот код HTML вообще. Мы должны играть только с его чистым css. ).
4. Единственный вариант в нашем случае - flex-box .
5. Мы не можем использовать константу height или calc(100% - xxx), потому что у нас нет xxx.
6. У нас может быть больше двух строк, а .N может появиться в третьей строка (или четвертая, ...).

Большое спасибо.