下面溢出的CSS列

在使用CSS列创建多列蛇形布局时，内容似乎自然要向右溢出。我正在寻找一个解决方案，将溢出低于父容器的固定高度

例如：

这是当内容物达到固定高度限制并溢出时的自然流动：

---------
|[1] [4]| [7]
|[2] [5]| [8]
|[3] [6]| [9]
---------

这就是我希望它溢出的方式：

---------
|[1] [4]|
|[2] [5]|
|[3] [6]|
---------
[7]
[8]
[9]

示例HTML

<div class="page">
    <div class="column">
      <div class="item">
        Test Item 1
      </div>
      <div class="item">
        Test Item 2
      </div>
      <div class="item">
        Test Item 3
      </div>
      <div class="item">
        Test Item 4
      </div>
      <div class="item">
        Test Item 5
      </div>
      <div class="item">
        Test Item 6
      </div>
      <div class="item">
        Test Item 7
      </div>
      <div class="item">
        Test Item 8
      </div>
      <div class="item">
        Test Item 9
      </div>
      <div class="item">
        Test Item 10
      </div>
      <div class="item">
        Test Item 11
      </div>
      <div class="item">
        Test Item 12
      </div>
      <div class="item">
        Test Item 13
      </div>
      <div class="item">
        Test Item 14
      </div>
      <div class="item">
        Test Item 15
      </div>
      <div class="item">
        Test Item 16
      </div>
      <div class="item">
        Test Item 17
      </div>
      <div class="item">
        Test Item 18
      </div>
      <div class="item">
        Test Item 19
      </div>
      <div class="item">
        Test Item 20
      </div>
      <div class="item">
        Test Item 21
      </div>
    </div>
</div>

下面是一个代码笔示例：

---

有什么建议吗？甚至可行吗？

您可以使用flexbox和

flex-wrap

属性实现此结果。我认为这个例子会有所帮助

.container{
显示器：flex；
柔性包装：包装；
}
.column>div{
保证金：5px；
宽度：100px；
高度：100px；
背景色：淡天蓝；
}

不完全是我想要的。我有一个带有单亲容器的数据字符串。我没有能力将数据块包装在额外的div中。CSS列在这方面非常有用，直到它需要溢出为止。我正在寻找报纸专栏风格的解决方案。它与上面的示例类似，但没有class=“column”包装div。这里有一个代码笔示例：请在问题中包含您的HTML和CSS。我包含了一个代码笔示例。这还不够吗？不，谢谢你的提问；根据站点规则，代码必须在问题本身中。如果和/或当CodePen被移除或CodePen本身关闭时，由于缺乏必要的细节，问题变得无法回答。如果这是一个答案，那么这个答案也会因为同样的原因失去它的用处。确切的效果是不可能的，但是在互联网上有一些很好的专栏处理方法。如果你想知道我的答案——首先，我需要知道原因是什么——响应性或限制内容空间的奇怪想法

.page {
  width: 400px;
  height: 300px;
  background: #ddd;
}

.column {
  column-count: 2;
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.item {
  padding: 8px 10px;
  break-inside: avoid;
  break-before: always;
}