如何强制flexbox最后一行的项目拾取所有剩余高度(在flexrow模式下)?

.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>