IE/Firefoxで2ページ目以降が印刷されない(解決)

先日、担当しているWebサイトで、IEとFirefoxで2ページ目以降のページが印刷されないという事象にぶつかりました。
調査とブラウザでの検証に時間を取られて苦い思いをしたので、備忘録的に解決法を残しておきたいと思います。

解決法1(Firefox)

まず、ここでの原因はdisplay: flex;でした。
そのため、印刷をしたい部分の一番外側にかっているdisplay: flex;を印刷用のcss(@media print{ })でdisplay: block;で解除する。

解決法2(IE)

解決法1ではIEでのこの事象は解決しませんでした。
そこで、見切れてしまう要素(今回はmainタグの中身だけ見切れていたのでmainタグ部分)にoverflow: visible;を追加することで、2ページ目以降も全てのページが印刷されるようになりました。
最初はbodyタグにこれを付けていたのですが、効果がなく、事象が発生している部分に書く必要があるため、一度試して効かない際は親要素や子要素を疑って試してみると解決するかもしれません。

おまけ

管理画面のサイドバーなど、印刷時に不要と思われる要素は印刷用cssでdisplay: none;などで修正しておくと、印刷できる要素の横幅が増えるので、印刷で出す紙の枚数も削減できて、親切かもしれません。

最後までお読み下さりありがとうございます! サポートではワンコイン100円から著者を応援をすることができます。 頂いたサポートはこれからWebデザイナーになろうとしている人達にお役立てできる情報の収集に使わせていただきます。