Flexbox容器宽度取决于列数

Question

我想创建一个只有两行，列数未知的元素布局。我希望这些元素的容器适合这些列的宽度。

使用flex-direction：column和flex-wrap我设法获得了布局，但是容器只保留了第一列的宽度。

.out {
  width:fit-content;    
}

h1 {
  background: #fc0;
}

.cols {
  flex-auto;
  display: flex;
  flex-direction:column;
  height: 110px;
  flex-wrap:wrap;
  justify-items:flex-start;
  width: fit-content ;
}

.cols > div {
  height: 50px;
  background: #000;
  color: #fff;
  margin:1px;  
  width: 150px;
  text-align: center;
}

<div class="out">
  <h1>Title</h1>
  <div class="cols">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

如您在上方的笔中所见，黄色标题应扩展为三列的宽度，但不会...

最后，我需要水平滚动并排放置更多“ .out”，但是如果我这样做，则下一个.out会出现在第一个“ .out”的第2列和第3列的顶部

我尝试了宽度/适合内容/最大内容/ ...的每种组合 我想念什么吗？

非常感谢