CSS:Flex Box不会在Firefox上打印所有页面

Question

我有一个结构与此类似的页面:

<main>
    <section>
        <article></article>
        <aside></aside>
    </section>
</main>

在CSS中,我包括以下内容:

main {
    display: flex;
    flex-direction: row;
}

这篇文章通常很多页.

当我打印或打印预览时,我发现它只给了我第一页左右.经过一些实验,我得到了这个解决方案:

@media print {
    aside {
        display: none;
    }
    main {
        display: block;
    }
}

也就是说,通过使用display: block我可以再次打印所有页面.在这种情况下,没关系,因为我不想aside打印,所以我不需要这种flex行为,但情况并非如此.

它似乎在Safari和Chrome上运行良好.我在Mac上测试这个.

为什么这不适用于Firefox？

实际页面可以在以下网址找到:https://www.thewebcoder.net/articles/toggling-attributes.它还处于早期阶段.

Answer 1

现在对此进行了一些研究,我仍然不确定Firefox会导致打印弹性容器被切断.我在Bugzilla上发现了一些非常古老的bug报告(例如https://bugzilla.mozilla.org/show_bug.cgi?id=258397),但它们与body标签上的溢出属性有关.不幸的是,试图调整身体的溢出为此没有任何作用.

我甚至去了Bootstrap 4的页面,该页面使用了基于flexbox的布局.果然,尝试在Firefox上打印它会导致同样的问题.

最后,甚至display: inline-block具有相同的效果.

在我看来,强制display: block打印是确保Firefox正确分页的原因.理想情况下,用于打印的布局将尽可能简单,这样就不会成为太多的障碍.至少对我来说,这是非常令人惊讶的.

也许拥有更多知识的人可以填写并告知这是一个合法的Firefox错误还是仅仅是他们设计理念的一部分.