CSS：柔性盒不打印所有頁面上的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's page它使用基於flexbox的佈局。果然，試圖在Firefox上打印它會導致同樣的問題。

最後，即使是display: inline-block也有同樣的效果。

在我看來，強制display: block打印是什麼將確保Firefox分頁正確。理想情況下，用於打印的佈局將盡可能簡單，這樣不會成爲太大的障礙。儘管如此，至少對我來說這是非常令人驚訝的。

也許有更多知識的人可以參與並告知這是一個合法的Firefox錯誤還是隻是他們設計理念的一部分。