列填充：平衡在 Chrome 中不起作用？

Question

column-fill: balance; 应该“在列之间平均划分内容”。它似乎在 Firefox 和 Edge 中正常工作。但是 Chrome（和 Opera）似乎真的不喜欢第二列，所以它大部分是空的。

这似乎与元素的高度有关，但我无法弄清楚具体如何。在第一个示例中，我希望第二段位于第二列中，但 Chrome 将它们都放在左列中，而将右列留空。

第二个例子展示了一个不同的类似不平衡的例子。

    div {
        border: solid blue 3px;
        column-count: 2;
        column-fill: balance;
    }
    p {
        border: solid red 3px;
        break-inside: avoid;
    }
    .second { height: 100px; }

<div>
    <p>plain</p> 
    <p class=second>.second</p>
</div>

<hr>

<div>
    <p>plain</p> 
    <p>plain</p> 
    <p>plain</p> 
    <p class=second>.second</p>
    <p>plain</p> 
</div>

这是一个错误吗？我是否缺少所有其他浏览器供应商也缺少的东西？

更重要的是，我怎样才能让这样的东西工作，甚至可能诉诸讨厌的黑客？

更新：显然是not limited to exactly 2 columns

Answer 1

column-fill 属性值仅适用于 Firefox。

就像在 chrome 中一样，列数实际上是column-count / 2。而在 Firefox 中，它实际上是 column-count:

为了使其在所有浏览器上均匀工作，应使用column-fill: auto。 More on this