4

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!

Example code

(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;
}
0

3 Answers 3

5

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

3
  • Good idea, in principle, but I need the container to be display: flex (sorry, that's only visible from the first jsFiddle, which was a bit too long to post here). I did not find further useful information on this issue on the page you refer to?!
    – BurninLeo
    Apr 27, 2016 at 18:37
  • 1
    Thank you. I didn't actually know that there is a display: inline-flex corresponding to display: inline. Additionally, I have to add width: 100% to still see the containers one below the other (because I can have multiple containers or only one ... depends). Now that works - cool. Is there any reason WHY Internet Explorer needs an inline element to have the break-inside: avoid working correctly?
    – BurninLeo
    Apr 28, 2016 at 6:37
  • Oh ... just a cross reference to IE conditional stuff - why should we bother Firefox and all the others with such IE hacks: stackoverflow.com/a/11173118/336311
    – BurninLeo
    Apr 28, 2016 at 6:50
4

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.

1

According to caniuse.com, IE11:

Supports the page-break-* alias from the CSS 2.1 specification, but not the break-* properties from the latest spec.

And

Does not support avoid for page-break-before & page-break-after (only page-break-inside).

3
  • As you can see, the page-break-inside attribute (in which IE11 should support avoid, according to caniuse.com) is already set. In the developer tools, IE11 tells to use the break-inside attribute - but neither of the both attributes seems to have the desired effect :(
    – BurninLeo
    Apr 27, 2016 at 18:41
  • @BurninLeo I can't check but is it possible that, even though it allows setting in dev tools, that it just doesn't work?
    – Rob
    Apr 27, 2016 at 18:44
  • Well, apparently it does not ;) What I wanted to say: The developer tools usually hshow which of the attirbutes is used and which are not - this is quite useful regarding all the -ms- and -webkit- prefixed attributes that make life harder. In my case, IE tells me that break-inside is used. I just don't understand why it has no effect... it should.
    – BurninLeo
    Apr 27, 2016 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.