下面溢出的 CSS 列答案

【问题标题】：CSS Columns that Overflow Below下面溢出的 CSS 列
【发布时间】：2020-10-10 03:03:00
【问题描述】：

在使用 CSS Columns 创建多列、蛇形布局时，似乎内容想要自然地向右溢出。我正在寻找一种会溢出到父容器的固定高度以下的解决方案。

例如：

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

---------
|[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>

示例 CSS

.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;
}

这是一个 Codepen 示例：https://codepen.io/Nikolnikov/pen/yLJLpQp

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

【问题讨论】：

请在问题中包含您的 HTML 和 CSS。
我包含了一个 Codepen 示例。这还不够吗？
不，谢谢你的提问；根据网站规则，代码必须在问题本身中。如果和/或当 CodePen 被移除或 CodePen 本身出现故障时，由于缺乏必要的细节，问题变得无法回答。如果它是一个答案，那么这个答案也会因为同样的原因失去它的用处。
不可能有确切的效果，但是互联网上有一些很好的列处理方法。如果您想要我的回答 - 首先我需要知道原因是什么 - 响应性或限制内容空间的奇怪想法

标签： css css-multicolumn-layout

【解决方案1】：

您可以使用 flexbox 和 flex-wrap 属性来实现此结果。我认为这个例子会有所帮助。

.container {
  display: flex;
  flex-wrap: wrap;
}

.column > div {
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: lightskyblue;
}

<div class="container">
  <div class="column">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="column">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="column">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

【讨论】：

不是我想要的。我有一个带有单个父容器的数据字符串。我没有能力将数据块包装在额外的 div 中。 CSS Columns 非常适合这个，直到它需要溢出。我正在寻找报纸专栏风格的解决方案。这就像您上面的示例，但没有 class="column" 包装 div。这是一个 Codepen 示例：codepen.io/Nikolnikov/pen/yLJLpQp