Internet Explorer (IE11) ignores CSS break-inside: avoid

Question

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

Javier Gonzalez · Accepted Answer · 2016-04-27T21:27:21.987

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

edited Apr 27 '16 at 21:27

answered Apr 27 '16 at 14:28

Javier Gonzalez

311
2
5

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 '16 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 '16 at 06:37
Oh ... just a cross reference to IE conditional stuff - why should we bother Firefox and all the others with such IE hacks: http://stackoverflow.com/a/11173118/336311 – BurninLeo Apr 28 '16 at 06:50

score 4 · Answer 2 · edited Nov 11 '19 at 18:03

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.

Rob · Answer 3 · 2016-04-27T14:39:11.610

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).

edited Apr 27 '16 at 14:39

answered Apr 27 '16 at 14:34

Rob

14,746
28
47
65

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 '16 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 '16 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 '16 at 18:46

Internet Explorer (IE11) ignores CSS break-inside: avoid

Example code

3 Answers3