This doesn\'t produce the expected result inside print preview in Firefox:
page 1
I'm pretty sure that won't work in firefox.
Things that can break page-break are(using page-break inside)
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.
break after - CSS | MDN
In short words, in your case cause you are using it inside flex
won't work.