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

如何解决break-before：页面在Mozilla Firefox中不起作用

今天，在我的日常工作中，我遇到了这个有趣的错误。我们在一个容器中有两个div，还有许多其他父母。我们要在第二个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;
  }
}

解决方法

解决方法很简单：

.flex {
  display: block;
}