5

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

recursive
  • 83,943
  • 34
  • 151
  • 241
  • Remove the top/bottom margin on the `p`: https://codepen.io/anon/pen/mvBPRN (or use `div` instead, which might be more appropriate)... and note, CSS Columns is still somewhat buggy and might need prefixed properties in some cases: https://css-tricks.com/almanac/properties/c/columns/ – Asons Feb 05 '19 at 19:52

2 Answers2

0

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>
Benrobot
  • 2,630
  • 1
  • 21
  • 24
  • 1
    The use case for this would be for dynamically generated contents of unknown heights. Computing where the breaks should be *is* the hard part. This may be useful to someone though. – recursive May 16 '22 at 16:59
  • @recursive, I agree that the use case is for contents of unknown heights. That is exactly how I have used it. – Benrobot May 17 '22 at 17:10
-1

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

Gaurav Saraswat
  • 1,353
  • 8
  • 11
  • Interesting information. However, using `column-fill: auto;` doesn't change the behavior in Chrome. – recursive Feb 05 '19 at 18:39
  • different as in? `auto` tries to fill each column in sequence manner till column covers height of the element. What I mean to say is , if `you give more specific and higher to your element. you will see content getting **seggregated** in columns from left to right order. – Gaurav Saraswat Feb 05 '19 at 18:52