Css: Flex Box Not Printing All Pages on Firefox

Printing via `print()` doesn't print all pages in Firefox

The best way to get a consistent printing behaviour is using a print stylesheet. This defines exactly, which content should be printed how, because browsers differ strongly on that matter. Some browsers have problems with certain markup (e.g. floated elements).

You can find a very good article about print stylesheets on A List Apart that should be very helpful for you.

Certainly there might be other good articles which are newer but this ALA article is so fundamental that it still is worth reading even though it is 10 years old - which is like stoneage for web-content;)

Firefox prints first page only but other browsers doing fine

Firefox previous versions had problem to print with long tables and iframes including absolute positioned elements.

If you don't see those elements,I suggest you to inspect such element with display:table or display:flex and without hesitation change it to display:block only for @media print

Another headache might be coming from overflow property. Find such element with overflow:scroll or overflow:hidden and of course write overflow:visible for @media print.

Thats all from me.

Firefox printing only 1st page

The long-standing bug with printing absolutely-positioned elements was fixed in Firefox 3.

The issues with missing pages are tracked in bug 521204 (look through the "depends on" list). Do you have frames or long tables on the page you're trying to print?

And yes, printing in Firefox is under-owned, sorry you have to deal with it...

problem with browsers Firefox and Chrome when printing a page?

Yes I solved it! After struggling for about two hours I discover two nice tricks one for fixing problems at Chrome: or just specify height at <tbody class="minHeight" style="height: 720px">

table {
display: table;
table-layout: fixed;
td {
display: table-cell;

And about Firefox I found out that it's a bug I solve it by giving table attribute cellspacing="0" and in CSS style border-collapse:initial;

Firefox prints extra blank page

Try using a print style sheet:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.


break-before: page is not working in Mozilla Firefox

The fix is simple:

.flex {
display: block;

Related Topics

Leave a reply