为什么 Firefox 在元素嵌套第二级后停止呈现嵌套的多列布局，以及如何修复？

如何解决为什么 Firefox 在元素嵌套第二级后停止呈现嵌套的多列布局，以及如何修复？

我正在研究用于正确显示嵌套多列布局的旧代码库。大约一年前的某个时候，Firefox 浏览器停止正确布置嵌套列，而 Chrome 仍在工作。所以我决定检查一下。

归结为“column-count”CSS 属性的使用。如果用于嵌套超过两层的 HTML 元素，看起来当前的 Firefox 浏览器完全忽略它。

有没有人注意到类似的问题，让我们想知道为什么嵌套的实现会在第二级停止？

这是一个代码笔：

https://codepen.io/Jorich/pen/rNjVPxK

div {
  column-rule: red solid 3px;

  margin: 3px;
  padding: 3px;
  border: 3px solid lightgray;

  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
}

<div style="column-count: 2;">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div style="column-count: 2;">
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div style="column-count: 2;">
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div style="column-count: 2;">
        <div>4</div>
        <div>4</div>
      </div>
    </div>
  </div>
</div>

Chrome 显示 4 级嵌套：

Firefox 停止在第 2 级嵌套：

今天，差不多一年后，行为没有改变，尽管我原以为这是一两个版本的 Firefox 浏览器的临时故障；相反，它仍然存在，就像预期的功能一样。在那段时间里，我对其他有类似问题的人进行了深入的网络搜索，但没有发现任何可以让我回到解决问题的道路上的观察结果。

除了彻底替换整个嵌套多列方法之外，您还会做什么？任何提示都会非常有用。