为什么超载：在Firefox中而不是在Chrome中隐藏隐藏多列渲染？

Question

我最近偶然发现Firefox中的一个奇怪行为，该行为带有columns:2 div中的列表。

如果列表设置为overflow:hidden，则Firefox将不再在2列中呈现。按预期在2列中进行渲染（有和没有溢出）。

这是一个最小的示例：

$('button').on('click', (e) => {
  $('ul').toggleClass('overflow')
})

div {
  columns:2;
}

ul.overflow {
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>toggle overflow</button>
<div>
    <ul>
        <li>Lorem ipsum dolor.</li>
        <li>Consequuntur, ab nostrum.</li>
        <li>Quibusdam, iure, fuga.</li>
        <li>Suscipit quisquam, vel.</li>
        <li>Assumenda architecto, adipisci!</li>
        <li>Molestias, nostrum ratione.</li>
        <li>Quaerat, eveniet, in.</li>
        <li>Illum, debitis, dicta.</li>
        <li>Tempore, placeat, ea.</li>
        <li>Amet dignissimos, maiores.</li>
        <li>Odio, eos, ullam.</li>
        <li>Modi libero, quis!</li>
        <li>Aliquid, commodi, voluptates.</li>
        <li>Aperiam, magni, vel.</li>
        <li>Vitae, minima dolorum!</li>
        <li>Quidem, corporis, dolorum.</li>
        <li>Autem, minima, sit.</li>
        <li>Adipisci, odio, numquam.</li>
        <li>At, dicta, hic!</li>
        <li>Odit, blanditiis voluptate.</li>
    </ul>
</div>

在CodePen上：https://codepen.io/BugHunter2k/pen/rNaVpGG

什么渲染是正确的？我可以添加一些内容吗，即使[overflow:hidden

，Firefox也可以渲染2列

Answer 1

另一答案