'column-fill: balance not working in Chrome?

column-fill: balance; is supposed to "divide content equally between columns". It seems to be working properly in Firefox and Edge. But Chrome (and Opera) seem to really dislike the second column, leaving it mostly empty.

It seems to be related to the height of the elements, but I can't figure out exactly how. In the first example, I'd expect the second paragraph to be in the second column, but Chrome puts them both in the left column, leaving the right one empty.

The second example shows a different similarly unbalanced example.

    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>

Is this a bug? Am I missing something that all the other browser vendors are too?

And more importantly, how can I get something like this to work, possibly even resorting to nasty hacks?

Update: Apparently, it's not limited to exactly 2 columns

cssgoogle-chromecss-multicolumn-layout


Solution 1:[1]

My apologies if I misunderstood your question. Since it sounds like your goal is to put the second paragraph on the next column I added break-before: column to your .second style. See the first code snippet.

Also, the column-fill: balance style is supposed to try to use all columns. It doesn't in your example because you added break-inside: avoid to every element. It sounds like you want column-fill: auto instead. The column-fill: auto style won't work on Chrome unless you also specify the height of the multi column container. See the second code snippet.

The following are great references:

Added break-before: column Only

    div {
        border: solid blue 3px;
        column-count: 2;
        column-fill: balance;
    }
    p {
        border: solid red 3px;
        break-inside: avoid;
    }
    .second { 
        height: 100px;
        break-before: column;
    }
<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>

Changed to Use column-fill: auto and height

    div {
        border: solid blue 3px;
        column-count: 2;
        column-fill: auto;
        height: 200px;
    }
    p {
        border: solid red 3px;
    }
    .second { 
        height: 100px;
        break-before: column;
    }
<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>

Solution 2:[2]

column-fill property value is available to only Firefox.

Like in chrome columns count will actually be column-count / 2. while in firefox its actually column-count:

To make it work evenly on all browser column-fill: auto should be used. More on this

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Benrobot
Solution 2

Related Questions