break-before：页面在 Mozilla Firefox 中不工作

Question

今天在日常工作中我遇到了这个有趣的错误。我们在一个容器中有两个 div，还有许多其他 parents。我们想在两个 div 之间、第二个 div 之前粘贴一个分页符。但是当打印 firefox 时拒绝进行分页。 chrome ie 工作正常。

我们有这个 html 结构：

<div class="flex">
<header></header>
<div>
  <div>
    <section>
      <div>
        <div class="first"></div>
        <div class="second"></div>
      </div>
    </section>
    <aside></aside>
  </div>
</div>
<footer></footer>

和这个 css:

.flex {
  display: flex;
}

.first,
.second {
  width: 90vw;
  height: 50px;
  margin-bottom: 10px;
}

.first {
  background-color: coral;
}

.second {
  background-color: lightblue;
}

@media print {
  .second {
    break-before: page;
  }
}

Answer 1

修复很简单：

.flex {
  display: block;
}

break-before：页面在 Mozilla Firefox 中不工作

break-before: page is not working in Mozilla Firefox

css

firefox

page-break