break-before: page is not working in Mozilla Firefox

Today during my working day routine I've faced this interesting bug. We have two divs in a container and many other parents. We want to paste a page break between two divs, before the second div. But when printing firefox denies doing a page break. chrome and ie works fine.

We have this html structure:

<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>

and this 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;
  }
}

The fix is simple:

.flex {
  display: block;
}