in a two-column box (column-count: 2
), the CSS setting break-inside: avoid
should avoid some content to break from one column into the other. This works fine in Firefox and Chrome (using the appropriate -webkit... names), but not in Internet Explorer.
Here's an example: https://jsfiddle.net/6s7843ue/1/
Just to ensure that it's not the flexbox within the content: https://jsfiddle.net/6s7843ue/4/
I did not find any information the IE wouldn't support the break-inside
, just the opposite: https://msdn.microsoft.com/de-de/library/hh772193%28v=vs.85%29.aspx
What am I doing wrong? Thanks!
(also see jsFiddle above)
HTML
<div class="outer" style="margin: 40px auto; width: 500px; border: 1px solid #0000FF">
<div class="container">
This is a rather long text to break into three separate lines, but sometimes won't stay in one column
</div>
<div class="container">
Should be in next column
</div>
</div>
CSS
.outer {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: 1.6em;
-moz-column-gap: 1.6em;
column-gap: 1.6em;
}
.container {
border: 1px solid #AAAAAA;
margin: 0.2em 0;
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
align-items: center;
}
Change in your container display: flex to display:inline-flex and it works in ie:
.container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Using display: inline
or display: inline-flex?
(a suggested by Javier Gonzalez) solves the issue. But it may require some additional CSS because inline elements naturally work different than block elements.
In a side note of https://stackoverflow.com/a/7785711/336311, I found another solution recently: overflow: hidden
. This has probably something to do with the block formatting contexts ... and it solves the issue as well, without changing the container's flow behavior.
.container {
overflow: hidden;
}
If somebody has a reasonable explanation for the strange understanding that IE sometimes has of break-inside: avoid
in combination with a column-count
, I am still interested.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With