page-break-after not working in flexboxes
Solution 1
I'm pretty sure that won't work in firefox.
Things that can break page-break are(using page-break inside)
- tables
- floating elements
- inline-block elements
- block elements with borders
To define if a break must be done, the following rules are applied:
1.If any of the three concerned values is a forced break value, that is always, left, right, page, column or region, it has precedence. If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the break-before value has precedence over the break-after value, which itself has precedence over the break-inside value).
2.If any of the three concerned values is an avoid break value, that is avoid, avoid-page, avoid-region, avoid-column, no such break will be applied at that point.
Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.
In short words, in your case cause you are using it inside flex
won't work.
Solution 2
Firefox doesn't do page-break correctly even with float elements, so I'm not surprised that flex doesn't work. Source: CSS Page-Break Not Working in all Browsers
In general, Firefox page-break support isn't great. See: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
If you need consistent, cross-browser printing results, the answer is almost always to use server-side PDF generation, with a tool like wkhtmltopdf or princexml.
![nice ass](https://i.stack.imgur.com/yc5Ez.png?s=256&g=1)
nice ass
Updated on July 13, 2022Comments
-
nice ass almost 2 years
This doesn't produce the expected result inside print preview in Firefox:
<aside> side </aside> <div> <p> page 1 </p> <p> page 2 </p> </div>
CSS:
body{ display: flex; } aside{ flex: none; width: 100px; } div{ flex: auto; } p{ break-after: always; page-break-after: always; }
In Chrome and IE I get 2 pages like I should. It appears that FF doesn't break the div in 2 pages when an ancestor is a flex box. Why?