CSS: Flex Box не печатает все страницы в Firefox

У меня есть страница со структурой, подобной этой:

<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

Посмотрев на это немного, я все еще не уверен, что о том, что Firefox заставляет печать гибких контейнеров быть отрезанными. Я нашел некоторые чрезвычайно старые сообщения об ошибках в Bugzilla (например, https://bugzilla.mozilla.org/show_bug.cgi?id=258397), но они имели какое-то отношение к свойствам переполнения на body тег. К сожалению, попытка настроить переполнение тела для этого ничего не делает.

Я даже пошел в Bootstrap 4 page, в котором используются макеты на основе flexbox. Конечно же, попытка распечатать его в Firefox приводит к той же проблеме.

Наконец, даже display: inline-block имеет тот же эффект.

Мне кажется, что форсирование display: block на принтере - это то, что обеспечит правильную разбивку Firefox. В идеале макет, который вы используете для печати, будет максимально простым, чтобы это не стало слишком сильным препятствием. Тем не менее, это очень удивительно, по крайней мере для меня.

Возможно, кто-то, у кого больше знаний, может обмануть и сообщить, является ли это законной ошибкой Firefox или просто частью их философии дизайна.