.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 450px;
  background: lightblue;
}

.item {
  border: 1px solid black;
  margin: 12px 10px;
  width: 100px;
}

个字符
看起来像你想要的吗？如果是，很好，如果不是，是的，我知道当孩子的数量增加时，它不会使你的容器变大，但你的请求有点问题。尝试使用不同的布局（我知道改变html是一个可怕的解决方案）。但是看here，这是不可能的（目前）。
我建议如下：

.container {
  display: inline-flex;
  flex-direction: row;
  max-height: 450px;
  background: lightblue;
}

.item {
  border: 1px solid black;
  margin: 12px 10px;
  width: 100px;
}

.column {
  display: flex;
  flex-direction: column;
}

<div class="container">

  <div class="column">
    <div class="item">
      <p>Paragraph 1</p>
    </div>
    <div class="item">
      <p>Paragraph 1</p>
    </div>
    <div class="item">
      <p>Paragraph 1</p>
    </div>
    <div class="item">
      <p>Paragraph 1</p>
    </div>
    <div class="item">
      <p>Paragraph 1</p>
    </div>
  </div>

  <div class="column">
    <div class="item">
      <p>Paragraph 1</p>
    </div>
  </div>

</div>

的字符串
因为你知道你要打破每第5个元素，你可以手动编写它。抱歉，我的回答不够。

因为你修好了你的max-hight: 450px。您需要将其更改为auto或增加像素。

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: auto;
  background: lightblue;
  width: fit-content;
  word-wrap: break-word;
}

.item {
  border: 1px solid black;
  border-radius: 2%;
  margin: 12px 10px;
  width: 100px;
}

个字符

要实现所需的布局，其中背景覆盖固定高度父级中的所有子div，您可以修改容器类的CSS，如下所示：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 450px;
  background: lightblue;
  width: fit-content;
  word-wrap: break-word;
  padding: 5px; /* Add padding to create some space between columns */
  box-sizing: border-box; /* Include padding in the width calculation */
}

.item {
  border: 1px solid black;
  border-radius: 2%;
  margin: 12px 10px;
  width: 100px;
}

/* Add a media query to force one column layout when the window width is smaller */
@media (max-width: 1000px) {
  .container {
flex-wrap: nowrap;
overflow-y: auto; /* Enable vertical scrolling when there are many items */
  }
}

个字符
有了这个更新的CSS，.container div将根据内容调整其宽度。max-height: 450px属性将父div保持在450px的固定高度。如果子项的数量超过了固定高度，则会为容器显示一个垂直滚动条。
请记住将媒体查询中的max-width值调整到所需的断点，以切换到单列布局。
请记住，使用width: fit-content可能无法在某些旧浏览器中正常工作。它在现代浏览器中得到支持，但如果您需要支持较旧的浏览器，则可能需要使用替代方法或考虑使用CSS框架（如Bootstrap）。