css - columns - space between flex

CSS: Flex Box no imprime todas las páginas en Firefox

Question

Tengo una página con una estructura similar a esta:

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

En el CSS, incluyo lo siguiente:

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

El artículo suele ser de muchas páginas.

Cuando imprimo o imprimo la vista previa, encuentro que solo me da la primera página más o menos. Después de algunos experimentos, tengo esta solución:

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

Es decir, al usar display: block puedo hacer que todas las páginas se impriman nuevamente. En este caso, está bien, ya que no quiero que se imprima la parte aside , así que no necesito el comportamiento flex , pero ese no es siempre el caso.

Parece funcionar bien en Safari y Chrome. Estoy probando esto en una Mac.

¿Por qué no funciona esto en Firefox?

La página actual se puede encontrar en: https://www.thewebcoder.net/articles/toggling-attributes . Todavía está en sus primeras etapas.

Answer 1

Ahora que he analizado esto un poco, todavía no estoy seguro de qué pasa con Firefox que hace que se corte la impresión de los contenedores de flexión. Encontré algunos informes de errores extremadamente antiguos en Bugzilla (por ejemplo, https://bugzilla.mozilla.org/show_bug.cgi?id=258397 ), pero tenían algo que ver con las propiedades de desbordamiento en la etiqueta del body . Desafortunadamente, tratar de ajustar el desbordamiento del cuerpo para esto no hace nada.

Incluso fui a la página de Bootstrap 4, que utiliza diseños basados ​​en flexbox. Efectivamente, intentar imprimirlo en Firefox da como resultado el mismo problema.

Finalmente, incluso display: inline-block tiene el mismo efecto.

Me parece que forzar la display: block en la impresión es lo que garantizará que Firefox se pagine correctamente. Lo ideal es que el diseño que utilices para imprimir sea lo más simple posible para que esto no se convierta en un obstáculo. Aún así, es muy sorprendente, al menos para mí.

Tal vez alguien con más conocimientos pueda incluir e informar si se trata de un error legítimo de Firefox o solo una parte de su filosofía de diseño.