闯入：避免-第一个元素（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;
    }