使用（column-span：all）之后（break-after：always）会引入巨大的差距。为什么？

Question

在div中使用列计数时，如果子项按以下顺序排列：

1. 文本
2. div with break-after：总是
3. 文本
4. 包含column-span的文本：all

然后在第4个孩子之上会有很大的差距。此外，随着列数增加，这个差距似乎在缩小。

是否有一种样式元素的方法，使得在div（强制列中断）之后具有div（跨越所有列）是可能的，而不会引入这个大间隙（并且不会手动放置具有位置的元素：绝对） ？

在这个jsfiddle中，第一个例子显示了差距。第二个显示了如何通过增加列数来减少间隙。第三个大致是我想要的样子，但不能使用它的任何一个位置：绝对无意义。

<击> https://jsfiddle.net/1jtogaLg/

编辑：上面的示例没有说明为什么使用.break元素（在内容数量不同的情况下强制列中断）。然而，这个jsfiddle确实展示了它：https://jsfiddle.net/1jtogaLg/1/

归结为：

<div class="page">
  <p>a</p>
  <div class="break"></div>
  <p>b</p>
  <p class="stretch">Why is this so far down</p>
</div>
<style>
  .page {
    width: 200px;
    height: 200px;
    background-color: #FFF8DC;
    border: 1px solid #E0DCBF;
    margin-right: 5px;
    column-count: 3;
    -webkit-column-count: 3;
    column-fill:auto;
  }
  .page * {
    margin:0;
  }  
  .stretch {
    column-span: all;
  }
  .break {
    -webkit-column-break-after: always;
    break-after: always;
  }
</style>

请注意，我唯一关心的浏览器是Chrome。如果它在其他浏览器中运行良好，但我的目标完全是Chrome。