Firefox Bug: Flexbox Elements Won't Wrap to Next Page in Print
I was recently checking / correcting print styles on a client site, and I ran into this somewhat frustrating issue when printing from Firefox. Certain areas of the page would get cut off at the end of page 1 and never reappear on page 2. Obviously, this is not what users are looking for when they attempt to print a website.
I knuckled down to identifying the issue, and eventually hit on forcing display: block on all elements on the site. This caused Firefox to properly wrap the element(s) to the next printed page.
@media print {
* {
display: block !important;
}
}
Obviously, this is not ideal either because it overrides many .hide-for-print and display:inline elements. I quickly found a Firefox bug which acknowledged the issue four years ago. Unfortunately, it has not been fixed yet.
The quick fix: Change display: flex to display: block. Too bad about your nice flexbox layout, but in print mode >readability is more important than design and layout.
Luckily, almost every instance of display: flex on this site was via Foundation's new XY Grid, so it's fairly easy to disable flex grids everywhere on the site by simply overriding the grid-x or grid-y classes.
@media print {
.grid-x, .grid-y {
display: block;
}
}
For a more powerful use case, we may want to disable this print helper for certain elements. Use .grid-printable to disable this override.
@media print {
.grid-x:not(.grid-printable),
.grid-y:not(.grid-printable) {
display: block;
}
}
Finally, if we override the grids in print, and force grid cells to fall below each other, we should make them full width and align the text to the left just in case.
@media print {
.grid-x:not(.grid-printable),
.grid-y:not(.grid-printable) {
display: block;
}
.grid-x:not(.grid-printable) > .cell,
.grid-y:not(.grid-printable) > .cell {
width: 100%;
text-align: left;
}
}
With luck, this may eventually make it into Foundation 6.