title: Flex box with page break not working
body: <p>I have my example setup in this <a href="https://codepen.io/SpringsTea/pen/XBxNWq" rel="noreferrer">codepen</a>.
  Im trying to print a dynamic amount of images in a grid in a way that things don't get cut off at the bottom of each page. usings <code>page-break-before</code> seems like the easiest way to do things.</p>
  
  <p>So every 5 cols I insert a break item</p>
  
  <p><code>&lt;div class="page-break"&gt;&lt;/div&gt;</code></p>
  
  <p>and the following css</p>
  
  <pre><code>@media all {
    .page-break { display: none; }
  }
  
  @media print {
    .page-break { display: block; page-break-before: always; }
  }
  </code></pre>
  
  <p>But this seems to have no effect. I can't find anywhere that explicitly states it, but since this attribute does not work with floating elements, I'm assuming it wont work with flexbox either.</p>
  
  <p>How else can I achieve what I'm looking for:
  Being able to create a grid 5 columns wide dynamically, from an unknown number of items, that will work with the page-break attribute.</p>