Firefoxでページの一部が印刷されない

忘却録。

現象

当ブログでは、Firefoxで印刷（印刷プレビュー）すると、2ページ目以降が印刷されない。1ページ目のみ印刷される。現象でした。
他のブログを確認してみたところ、コンテンツ部分を1ページに収まる範囲のみ印刷するものもありました。ヘッダー・フッター・コンテンツが別ページに印刷されるため、印刷ページ数は3ページでした。もちろんコンテンツ部分に2ページ以上の量があるページです。

※Firefox72（現在最新）で確認
※Chromeでは、2ページ目以降を含めて想定通りに印刷される

原因

display: flex;が原因です。

<body>にdisplay: flex;が指定されていたため、flexが指定されている要素が正常に印刷できず、問題現象が発生していました。flexの指定方法次第で、「2ページ目以降が印刷されない」「ページの一部が印刷されない」などの複数の現象として発生するようです。

※bugzillaには、本件を扱った次の起票があります。
　939897 - [meta] Support shifting / splitting flex items between continuations of a fragmented flex container (flexbox content truncated when printing)

解決？

Firefox86の印刷機能の機能拡張により問題が修正された可能性があります。まだ、Bugzillaは閉じていませんが、最低でも一部の問題は解決したものと考えられます。最新環境でいま一度、問題現象の確認をおすすめします。

解決策

「display: flex;」を「display: block;」等に置き換える。

flexが問題のため、flexの付いた要素を印刷時のみ他プロパティに変更して対応します。

@media print {
  body {
    display: block;
  }
}

※floatプロパティと組み合わせることでほとんどのレイアウトを再現できるはずです。

印刷とflex関連の他のバグ

印刷関連の他のバグ

参考