CSS 列填充自动忽略打印的分页符

Question

column-fill:auto 属性的工作原理是先填充一整列，然后再转到下一列。

.two-column {
  column-count: 2;
  column-fill: auto;
}

Chrome 仅在屏幕上正确执行此操作，但在打印和必须处理分页符时不正确：

A C
B D
---- page break
E G
F H
---- page break
I J  <-- two columns

但是，进入最后一页的列表的其余部分，布局恢复为“平衡”样式。至少，Chrome 可以，FireFox 正确显示它：

A C
B D
---- page break
E G
F H
---- page break
I
J

这是一个（已知的）Chrome 错误吗？有什么解决办法吗？

示例：https://codepen.io/Stu42/pen/PoqYYWo

更新：正如 Juan Marco 所指出的，这很可能是一个 Chrome 错误。如此处所述：https://github.com/w3c/csswg-drafts/issues/4036。我认为，任何对官方错误或状态的明确提及，或者更好的解决方法都可以算作一个答案。

Answer 1

对于column-fill MDN 说：

请注意，由于规范中未解决的问题，跨浏览器的列填充存在一些互操作性问题和错误。

如果您打算使用实验性功能或不受支持的功能，请查看caniuse 以获取信息。然后使用Autoprefixer 获取必要的供应商前缀（如果有）。

例如对于样式规则：

.two-column {
    column-count: 2;
    column-gap: 1cm;
    column-fill: auto;
    background-color: #faa;
}

Autoprefixer 生成了这个：

.two-column {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 1cm;
       -moz-column-gap: 1cm;
            column-gap: 1cm;
    -webkit-column-fill: auto;
       -moz-column-fill: auto;
            column-fill: auto;
    background-color: #faa;
}