page-break-after not working in flexboxes

Question

This doesn\'t produce the expected result inside print preview in Firefox:

  side



  
 page 1 
  


        
      

Answer 1

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+ */