break-inside: avoid not working with padding in edge

Question

I have a problem to get a column-layout to work correctly with block elements that contain paddings. The problem I'm facing is, that a thin line of white background from the first column breaks into the beginning of the second column. It occurs in IE11 and MS-Edge. Chrome and Firefox display the columns as intended.

.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;
    background-color: grey;
}
.container {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 0.75em;
  background-color: white;
}

.container + .container {
  
  margin-top: 0.5em;
}

<div class="outer" style="margin: 40px auto; width: 500px; border: 1px solid red">
    <div class="container">
      This is a rather long text to break into separate lines but - sometimes - not to stay in one. With some additional text for a longer column
    </div>    
    <div class="container">
      Next column
    </div>
    <div class="container">
      Another column
    </div>
</div>

How do I get break-inside: avoid to work with IE11 and MS-Edge? I've also tried to wrap the text into additional DIVs with a margin and removing the padding, but that breaks the text of the first column itself.

Does anyone has a hint? Thanks in advance!

UPDATE

It seems the problem is worse than discribed. break-inside: avoidjust isn't working in edge at all. Here I put block elements into the elements in the columns (also breaks with tables inside):

.column {
  column-count: 2;
  column-gap: 1em;
}

.elem {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.elem + .elem {
  margin-top: 0.5em;
}

.elem {
  background-color: orange;
}

.elem + .elem {
  background-color: lightblue;
}

.elem + .elem + .elem {
  background-color: lightgreen;
}

<div class="column">
  <div class="elem">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
  </div>
  <div class="elem">
    <div>one</div>
  </div>
  <div class="elem">
    <div>one</div>
  </div>
</div>

The MS documentation for Edge states it is supported, yet it isn't working. Even Can I use states, that it is supported and has no known issues listed.

There has to be some solution to this...

Answer 1

Ok, I finally found a solution: I've build a switch into the CSS which executes only for IE10, IE11 and MS Edge (found here: Browser Strangeness).

Inside that switch I set the elements to display: inline-block with width: 100%. That way it works in Chrome, Firefox and now Edge too.

.column {
  column-count: 2;
  column-gap: 1em;
}

.elem {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.elem + .elem {
  margin-top: 0.5em;
}

.elem {
  background-color: orange;
}

.elem + .elem {
  background-color: lightblue;
}

.elem + .elem + .elem {
  background-color: lightgreen;
}

/* columns fix for IE10, IE11 and MS Edge*/
_:-ms-lang(x), .column {

	margin-top: -0.5em;
}
_:-ms-lang(x), .elem {

	display: inline-block;
	width: 100%;
	margin-top: 0.5em;
}

<div class="column">
  <div class="elem">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
  </div>
  <div class="elem">
    <div>one</div>
  </div>
  <div class="elem">
    <div>one</div>
  </div>
</div>