html - 闯入:避免-第一个元素(IE，Edge，Firefox)忽略CSS

Question

最近，我遇到了一个问题。如果我在page-break: avoid中使用column-count: 2;（以及相应的浏览器规范前缀），则第一个元素失败。

HTML代码

<div class="outer" style="margin: 40px auto; width: 500px; border: 1px dotted black">
    <!-- <div class="inner"></div> -->
    <div class="inner" style="background-color: #FFCCCC">
      This is a rather long text to break into three separate lines, but sometimes won't stay in one column
    </div> 
    <div class="inner" style="background-color: #CCFFCC">
      Should be in next column
    </div>
</div>

CSS代码

.outer {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;
}
.inner {
  /* overflow: hidden; */
  border: 1px solid #6666FF;
  margin: 0.5em 0;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}

小提琴

https://jsfiddle.net/6s7843ue/6/

反修补程序1：当另一个元素位于损坏的框之前（在HTML代码中未注释）时，该框不会分为两列。但是，我不能这样做，因为在某些情况下，将只有一个内部元素，并且该元素将被放置在右侧，之前是另一个<div>。

反修正2：如果我通过overflow: hidden给内部元素一个新的块渲染上下文，它将起作用。但是，我无法做到这一点，因为我在内部元素中使用了工具提示，并且这些元素绝对定位为<div>，大于内部元素。

反修正3：而且，我不能在我的情况下使用display: flex，因为内部元素的长度是变化的，并且它们之间必须一个接一个。设置width: 100%不能解决该问题-这很愚蠢，因为我想要块。

反修正4：我考虑设置display: table，但在实际情况下，我需要display: flex作为内部元素。即使我在<div>中放入另一个<div>，我也担心在页面上使用50个表元素可能会导致进一步的副作用...

简而言之：为什么page-break: avoid在第一个元素上失败？它适用于Ubuntu 45下的Firefox 45，但不适用于Windows。而且它在IE和Edge中无法运行，但在Chrome中可以正常运行。

更重要的是：是否有一种解决方案不会在我的HTML或CSS代码中造成严重混乱？

Answer 1

参见：https://jsfiddle.net/shain/6s7843ue/9/
在IE，Edge中不起作用。

.inner {
      /* overflow: hidden; */
      border: 1px solid #6666FF;
      display: flex;
      flex-direction: column;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      page-break-inside: avoid;
    }