CSS：私は、次のものがあり、CSSで</p> <pre><code><main> <section> <article></article> <aside></aside> </section> </main> </code></pre> <p>：フレックスボックスは、Firefox

Question

上のすべてのページ私はこれと同様の構造でページを持ってを印刷しない

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

品です多くの場合、ページが長くなります。

プレビューを印刷したり印刷したりすると、最初のページしか表示されません。

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

私は再び印刷するページのすべてを取得することができdisplay: blockを使用することにより、次のとおりです。いくつかの実験の後、私はこのソリューションを持っています。この場合は、asideが印刷されないようにしてもOKです。したがって、flexの動作は必要ありませんが、必ずしもそうではありません。

SafariとChromeでうまくいくようです。私はこれをMacでテストしています。

Firefoxでこれが動作しないのはなぜですか？

実際のページはhttps://www.thewebcoder.net/articles/toggling-attributesにあります。それはまだ初期の段階です。

Answer 1

これでちょっと見てきましたが、Firefoxが印刷フレックスコンテナを切断する原因は何か分かりません。私はBugzilla（例えば、https://bugzilla.mozilla.org/show_bug.cgi?id=258397）に関するかなり古いバグレポートを見つけましたが、bodyタグのオーバーフロープロパティと関連がありました。残念ながら、これのために体のオーバーフローを調整しようとすると何も起こりません。

フレックスボックスに基づくレイアウトを使用するBootstrap 4's pageに行きました。確かに、Firefoxで印刷しようとすると、同じ問題が発生します。

最後に、display: inline-blockでも同じ効果があります。

私は、印刷にdisplay: blockを強制すると、Firefoxのページングが正しく行われるようになっているようです。理想的には、印刷に使用するレイアウトはできるだけ単純なので、あまり妨げにならないようにしてください。それでも、少なくとも私にとっては驚くべきことです。

おそらく、知識が豊富な人がチップを入れて、これが正当なFirefoxのバグか、デザイン哲学の一部であるかどうかを知らせるかもしれません。