CSS column-fill auto ignores printed page breaks

Question

The column-fill:auto property works by first populating one full column before going to the next.

.two-column {
  column-count: 2;
  column-fill: auto;
}

Chrome does this only correctly on screen, but not when printing and having to deal with page breaks:

A C
B D
---- page break
E G
F H
---- page break
I J  <-- two columns

However, the remaining part of the list that breaks into the last page, the layout reverts back to a "balanced"-style. At least, Chrome does, FireFox, displays it correctly:

A C
B D
---- page break
E G
F H
---- page break
I
J

Is this a (known) Chrome bug? Is there any workaround for it?

Example: https://codepen.io/Stu42/pen/PoqYYWo

Update: As pointed out by Juan Marco, this is likely a Chrome bug. As discussed here: https://github.com/w3c/csswg-drafts/issues/4036. Any clear reference to a official bug or status, or better, a workaround would count as an answer, I think.

Answer 1

I know this is old but I just ran into this issue. I was able to fix it by creating a child div within the containing element that sets up the grid, and then setting break-inside to avoid.

E.g., from your example, something like this:

 <div class="two-column">
    <div style="break-inside: avoid;">
      <p>A</p>
      <p>B</p>
      <p>C</p>
      <p>D</p>
      <p>E</p>
      <p>F</p>
    </div>
  </div>

This causes the last page to not break the two paragraphs apart so you end up with this structure:

A C
B D
---- page break
E
F

Hope that helps someone.

Answer 2

For column-fill MDN says:

Note that there are some interoperability issues and bugs with column-fill across browsers, due to unresolved issues in the specification.

Whenever you plan to use a feature that's experimental or not well supported check caniuse for info. Then use Autoprefixer to get the necessary vendor prefixes (if any).

For example, for the style rule:

.two-column {
    column-count: 2;
    column-gap: 1cm;
    column-fill: auto;
    background-color: #faa;
}

Autoprefixer generated this:

.two-column {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 1cm;
       -moz-column-gap: 1cm;
            column-gap: 1cm;
    -webkit-column-fill: auto;
       -moz-column-fill: auto;
            column-fill: auto;
    background-color: #faa;
}