The column-fill:auto property functions by filling one complete column before moving on to the next.
.two-column {
column-count: 2;
column-fill: auto;
}
In Chrome, this behavior is consistent while viewing on screen, but when printing and encountering page breaks, it may not work as expected:
A C
B D
---- page break
E G
F H
---- page break
I J <-- two columns
However, towards the end of the list where it breaks onto the final page, the layout switches to a "balanced" style. While Chrome displays this behavior, FireFox handles it correctly:
A C
B D
---- page break
E G
F H
---- page break
I
J
Could this be a known bug in Chrome? Is there a workaround available?
For reference, you can view an example here.
Update: According to Juan Marco, this issue may indeed be a bug in Chrome. Further discussion can be found here: https://github.com/w3c/csswg-drafts/issues/4036. Any official bug report or status update, or even a workaround solution, would be greatly appreciated.