I'm building a 2-column layout using CSS multi-columns, and I want to give a hint as to where to break the columns.
So I say: columns: 2 on the container, and break-before: column on the child where I want the break.
IE (11 in my case) decides to split my content into 3 columns and overflows to the right of its box :-(
Chrome (using the prefixed alternatives -webkit-columns:2 and -webkit-column-break-before: always) behaves nicely.
Am I doing something wrong here ?
Is this a misbehavior of IE ?
Any workaround suggestions ?
As I am myself very interested in this question I studied the spec and some examples of multi-column layouts.
First I have to say that the spec is horribly "imprecise"!
But it seems that any break definition has precedence over the column-count value (though I could not find it explicitly in the spec or anywhere else).
This only happens if, according to the multi-column pseudo-algorithm, the respective element, which sets the break point, is already part of the last column (as in your example fiddle).
The example given by @GCyrillus (see comments on question) just works, because the height setting forces the algorithm to first fill the given height before additional column boxes are created in the inline direction.
You can see the "original" effect, if you change the height from 20em to 10em!
So after all, I tend to say that it is not a bug and IE behaves correctly.
At least it might be an error or shortcoming of the multi-column algorithm to not recalculate or refill the columns so that despite any breaks the column-count value is respected. Logically this can only be done as long as the number of defined break points is one less than the column-count value.
As actually IE 10+ is the only browser supporting the multi-column module including the break-xy properties, it is hard to tell if the behaviour is right or wrong and how other browsers will handle this in the future!
For now, I would recommend to not use these properties at all.