Flexbox的屏幕尺寸可变

Question

我正在尝试使用flexbox实现以下结构，但是当项目移至第二行时，我不希望它们填满整个屏幕，但与第一行中的项目仅占用相同的空间。

应该做的是均匀地填充行的空间，并将项目大小调整到指定的最小宽度。如果由于屏幕尺寸太小而导致项目不再适合该行，则应该将它们滑到下一行并保持与第一行中的项目相同的大小。

HTML

<div class="outer">
      <div class="div-content-elements">
        content element 1
        <br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      </div>
      <div class="div-content-elements">
        content element 2
        <br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      </div>
      <div class="div-content-elements">
        content element 3
        <br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      </div>
      <div class="div-content-elements">
        content element 4
        <br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      </div>
    </div>

CSS

.outer {
  border: 2px solid blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  grid-column-gap: 10px;
  justify-content: space-between;
}

.div-content-elements {
  width:23%;
  border:2px solid green;

  min-width: 200px;
  flex: 1;
  margin: 10px;
}

这是一个example

预先感谢， 任何帮助表示赞赏。