Description
I was playing with the column-fill
property in different browsers, and I noticed something interesting. It seems a height
is required on the multicol element for column-fill: auto
to take effect (with an automatic height, the columns are always balanced), but I feel like a min-height
should be enough. In fact, due to the way it is now, it's not safe to use column-fill: auto
because it requires a fixed height, which means text can be clipped if that height is not large enough to display all of it.
To show you what I'm talking about, check out this editable example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-fill
Resize your browser window down until you can't see some of the text (due to the height of the div
being restricted to 100px). Now change the height: 100px;
declaration to min-height: 100px
in order to fix that, and column-fill: auto
loses its effect (the browser has to be large enough to notice the effect in the first place). Reproduced on Safari 11.1.2 and Chrome 68 which I'm guessing follow the spec, whereas Firefox 61 behaves weirdly and only fills the first column and leaves the other two empty when there's a min-height.
So, my question is: shouldn't column-fill: auto
take min-height
, or rather the computed height rather than only the height
property, into account?