CSS: Flex Box not printing all pages on Firefox

Question

I have a page with a structure similar to this:

<main>     <section>         <article></article>         <aside></aside>     </section> </main> 

In the CSS, I include the following:

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

The article is often many pages long.

When I print or print preview, I find that it only gives me the first page or so. After some experimenting, I have got this solution:

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

That is, by using display: block I can get all of the pages to print again. In this case, it’s OK, as I don’t want the aside to print, so I don’t need the flex behaviour, but that’s not always the case.

It seems to work well on Safari and Chrome. I am testing this on a Mac.

Why doesn’t this work on Firefox?

The actual page can be found at: https://www.internotes.net/articles/toggling-attributes. It’s still in its early stages.

Answer 1

Having looked into this for a bit now, I'm still not sure what about Firefox causes printing flex containers to be cut off. I found some extremely old bug reports on Bugzilla (eg. https://bugzilla.mozilla.org/show_bug.cgi?id=258397), but they had something to do with overflow properties on the body tag. Unfortunately, trying to adjust the overflow of body for this does nothing.

I even went to Bootstrap 4's page which uses layouts based on flexbox. Sure enough, attempting to print it on Firefox results in the same issue.

Finally, even display: inline-block has the same effect.

It seems to me that forcing display: block on print is what will ensure Firefox paginates correctly. Ideally, the layout you use for printing will be as simple as possible so that this doesn't become too much of a hindrance. Still, it's very surprising, at least to me.

Perhaps someone with more knowledge can chip in and inform whether this is a legitimate Firefox bug or just a part of their design philosophy.