CSS: Flex Box not printing all pages on Firefox

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.