page-break-after not working in flexboxes

Question

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?

Answer 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.

break after - CSS | MDN

In short words, in your case cause you are using it inside flex won't work.

Answer 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.

Answer 3

display: flex;

is a property that is not, by default, cross browser compatible.

it would be helpful if you had a fiddle for an example or elaborated a bit more on what you're trying to achieve, but I think this will work:

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works)*/
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

Answer 4

word-wrap: break-word;

Example : http://jsfiddle.net/yejxaq6h/5/