заполнение столбцов: баланс не работает в 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 следует использовать. Подробнее об этом