如何通过CSS属性打破flex wrap？

Question

编辑！

我有物品清单。我希望五个div开始新行（通过给定xxx类），即使所有项目都可以换行。

为什么page-break-after似乎无法正常工作？ （as taken from this answer）

<style>
  .container {
   background: tomato;
   display: flex;
   flex-flow: row wrap;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.xxx {
  page-break-after: always;
  background: silver;
}
  </style>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item xxx">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>