带分页符的 Flex 框不起作用

Question

我在这个codepen 中有我的示例设置。我试图在网格中打印动态数量的图像，以使每页底部的内容不会被切断。使用page-break-before似乎是最简单的做事方式。

所以每 5 列我插入一个中断项

<div class="page-break"></div>

和以下css

@media all {
  .page-break { display: none; }
}

@media print {
  .page-break { display: block; page-break-before: always; }
}

但这似乎没有效果。我找不到任何明确说明它的地方，但由于此属性不适用于浮动元素，因此我假设它也不适用于 flexbox。

我还能如何实现我正在寻找的：能够从未知数量的项目中动态创建一个 5 列宽的网格，这将与分页属性一起使用。