如何在flexbox布局的最后一行中获得单独的元素以使其看起来相同？

我正在尝试为一个矩形列表创建一些CSS,包装,响应.矩形可以包含可变数量的文本.矩形的最小宽度应为300px,但如果有更多可用空间,则可以增长.它应该工作无论矩形的数量.

这是我希望它在大型桌面屏幕,普通桌面屏幕和手机中看起来像的图像,粗略地说:

(我意识到大多数手机和台式机都比像素更宽,但这些数字在SO的代码片段中更易于使用.)

我正在尝试三种技术,但没有一种能够做到我想要的:

Flexbox似乎是这项工作的理想选择.flexbox实现的问题在于我无法找到确保最后一个矩形与其余矩形保持相同大小的方法,同时还允许矩形在非常宽的屏幕中生长.这是我能想出的最好的flexbox结果的图像,最后一行有问题:

这是flexbox实现的代码:

.container {
  display: flex;
  flex-wrap: wrap;
}
.rect {
  flex: 1 0 300px;
  height: 150px;
}

.container:after {
  content: "";
  clear: both;
}
.rect {
  float: left;
  min-width: 300px;
  height: 150px;
  overflow-y: hidden;
}

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  

  
Lorem ipsum dolor sit amet, consectetur
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed