CSS: Flex Box not printing all pages on Firefox

前端 未结 2 1624
独厮守ぢ
独厮守ぢ 2021-02-02 08:01

I have a page with a structure similar to this:

相关标签:
2条回答
  • 2021-02-02 08:34

    Having looked into this for a bit now, I'm still not sure what about Firefox causes printing flex containers to be cut off. I found some extremely old bug reports on Bugzilla (eg. https://bugzilla.mozilla.org/show_bug.cgi?id=258397), but they had something to do with overflow properties on the body tag. Unfortunately, trying to adjust the overflow of body for this does nothing.

    I even went to Bootstrap 4's page which uses layouts based on flexbox. Sure enough, attempting to print it on Firefox results in the same issue.

    Finally, even display: inline-block has the same effect.

    It seems to me that forcing display: block on print is what will ensure Firefox paginates correctly. Ideally, the layout you use for printing will be as simple as possible so that this doesn't become too much of a hindrance. Still, it's very surprising, at least to me.

    Perhaps someone with more knowledge can chip in and inform whether this is a legitimate Firefox bug or just a part of their design philosophy.

    0 讨论(0)
  • 2021-02-02 08:53

    Bug not fixed yet: https://bugzilla.mozilla.org/show_bug.cgi?id=939897

    Unfortunately seems like I'm hitting the same issue but because of CSS Grid. This is the site: https://cv.l3x.in

    On macOs 10.14.6 it prints all right in Chrome and Safari, on Firefox 72.0 it's truncating the "Work experience" section at the first page break, skipping to the next item in the unsorted list.

    The same content rendered without any display: grid prints correctly: https://cv.l3x.in/work

    The same quick workaround works though, i.e. replacing display: grid with display: block

    0 讨论(0)
提交回复
热议问题