Took my quite a while to find this, because it’s hardly mentioned anywhere except as a note on the Mozilla Developer Network:
When you are using a flexbox layout in multi-line mode (e.g. the ‘flex-wrap’ property is set to wrap), you can force flex items to start on a new line by setting the ‘page-break-before’ property.
No longer works:
http://codepen.io/jezmck/pen/aNroPw?editors=1100
Your example works fine for me with Firefox 46, Chrome 50 and Explorer 11. You can see another working example on the MDN page about flex-wrap