column-fill：余额在 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>

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

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

更新：显然，它不仅限于 2 列

Answer 1

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

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

为了使其在所有浏览器上均匀工作，column-fill: auto应该使用。更多关于此