/ / CSS:フレックスボックスはFirefoxのすべてのページを印刷しない - css、firefox、printing、flexbox

CSS:フレックスボックスはFirefoxのすべてのページを印刷しない - css、firefox、printing、flexbox

私はこのような構造のページを持っています:

<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。それはまだ初期の段階です。

回答:

回答№1の場合は10

これについて少し調べてみると、Firefoxが印刷フレックスコンテナを切断する原因はまだ分かりません。Bugzillaに関する非常に古いバグレポートが見つかりました。 https://bugzilla.mozilla.org/show_bug.cgi?id=258397)しかし、彼らは何かをオーバーフロープロパティとは、 body タグ。残念ながら、これのために体のオーバーフローを調整しようとすると何も起こりません。

私も行った ブートストラップ4 "のページ フレックスボックスに基づくレイアウトを使用します。確かに、Firefoxで印刷しようとすると、同じ問題が発生します。

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

私には強制力があるようです display: block 印刷物にはFirefoxのページングを保証するものがあります正しく理想的には、印刷に使用するレイアウトはできるだけシンプルになり、あまりにも多くの障害にならないようにしてください。それでも、少なくとも私にとっては非常に驚きです。

たぶん多くの知識を持った人がチップを入れて、これが正当なFirefoxのバグか、デザイン哲学の一部かどうかを知らせるかもしれません。