/ / CSS: Flex Box não imprime todas as páginas no Firefox - css, firefox, impressão, flexbox

CSS: Flex Box não imprime todas as páginas no Firefox - css, firefox, impressão, flexbox

Eu tenho uma página com uma estrutura semelhante a esta:

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

No CSS, incluo o seguinte:

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

O artigo é muitas vezes muitas páginas.

Quando imprimo ou imprimo, acho que só me dá a primeira página. Depois de algumas experiências, tenho esta solução:

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

Isto é, usando display: block Consigo que todas as páginas sejam impressas novamente. Nesse caso, tudo bem, porque eu não quero o aside para imprimir, então eu não preciso do flex comportamento, mas nem sempre é o caso.

Parece funcionar bem no Safari e no Chrome. Eu estou testando isso em um Mac.

Por que isso não funciona no Firefox?

A página atual pode ser encontrada em: https://www.thewebcoder.net/articles/toggling-attributes. Ainda está em seus estágios iniciais.

Respostas:

10 para resposta № 1

Tendo analisado isso um pouco agora, eu ainda não tenho certeza sobre o que o Firefox faz com que a impressão de contêineres flexíveis seja cortada. Eu encontrei alguns relatórios de bugs extremamente antigos no Bugzilla (por exemplo. https://bugzilla.mozilla.org/show_bug.cgi?id=258397), mas eles tinham algo a ver com propriedades de estouro no body tag. Infelizmente, tentando ajustar o excesso de corpo para isso não faz nada.

Eu até fui para Bootstrap 4 "s page que usa layouts com base no flexbox. Com certeza, a tentativa de imprimi-lo no Firefox resulta no mesmo problema.

Finalmente, até display: inline-block tem o mesmo efeito.

Parece-me que forçando display: block na impressão é o que vai garantir que o Firefox paginecorretamente. Idealmente, o layout que você usa para impressão será o mais simples possível, de modo que isso não se torne um grande obstáculo. Ainda assim, é muito surpreendente, pelo menos para mim.

Talvez alguém com mais conhecimento possa entrar em contato e informar se esse é um bug legítimo do Firefox ou apenas parte de sua filosofia de design.