Firefox中break-inside: avoid打印分页失效问题排查

我需要在打印和打印预览时避免div被分页截断，于是给元素添加了break-inside: avoid;属性，这个设置在Chrome里正常工作，但在Firefox里完全没效果。我的预期是让sub-content 2里的完整文本显示在打印预览的同一页面。

相关代码 #

CSS

.main-content, .section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.section {
  border: 2px solid blue;
}

.sub-content {
  margin: 2px;
  border: 2px solid darkorange;
}

@media print {
  p {
    break-inside: avoid;
  }
}

HTML

<div class="main-content">
  <button onclick="window.print();">Print</button>
  <div class="section top">
    Top
  </div>
  <div class="section middle">
    Middle
    <div class="sub-content" style="height: 300px">
      sub-content 1
    </div>
    <div class="sub-content big-sub-content">
      sub-content 2
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus diam at sem pharetra, eu imperdiet turpis pellentesque. Nulla ut nisi sapien. Donec sit amet auctor massa, non congue elit. Praesent ultricies posuere eros eu congue. Suspendisse aliquet hendrerit dictum. Duis nec laoreet dui. Duis tempor mi a massa maximus bibendum. Phasellus ornare bibendum dui, ut ornare ex sagittis in. Suspendisse dignissim magna quis ligula auctor, in malesuada felis tincidunt. Morbi rutrum augue vulputate, sollicitudin ipsum id, imperdiet felis. Sed nec orci fringilla, porta dui vitae, placerat velit. Morbi lacus elit, ornare id tempus in, ornare non odio. Donec ultrices euismod magna, ut vehicula tortor pulvinar in. Morbi maximus, libero vitae convallis sodales, dui neque tempor urna, at faucibus quam libero sit amet urna.

Vivamus ut vulputate odio. Duis bibendum sed enim non posuere. Donec lobortis, sapien non hendrerit dapibus, nibh leo auctor lorem, id facilisis eros tellus a metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget porta sem, sit amet gravida augue. Cras vulputate felis vitae ultrices malesuada. Aliquam nulla metus, dapibus et tempus id, laoreet ut nunc. Nam diam nunc, blandit vel posuere vel, ultricies ac orci. Maecenas neque eros, euismod id pellentesque vel, eleifend quis felis. Nulla tempus dolor a turpis pellentesque, non fringilla massa egestas. Praesent ullamcorper sem ut felis dignissim, nec condimentum nisl cursus. Aliquam erat volutpat. Maecenas at felis egestas mi egestas lacinia et fringilla ligula.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed congue vitae enim fringilla tempor. Nulla eu lectus sit amet tellus commodo porta vitae in nisl. Nulla tincidunt placerat lorem, iaculis eleifend augue maximus sed. Donec tincidunt augue sed pharetra pretium. Phasellus varius faucibus mauris, eget convallis metus pellentesque nec. Vivamus elementum, mauris ut posuere porta, ipsum odio posuere velit, et molestie urna tortor id nunc. Nullam ac tortor interdum, suscipit diam id, rutrum felis.

Nulla condimentum libero vel sem aliquam porttitor. Aenean posuere imperdiet ex at bibendum. Donec sed fermentum ligula. Sed et viverra nulla, vitae tempus nulla. Nulla consequat mi ut nisl dictum, consequat pharetra ex posuere. Donec aliquam eleifend enim, rhoncus tristique lacus mattis gravida. Nullam ligula ante, aliquet sit amet aliquet a, tempor at erat. Suspendisse et magna quis ligula ultrices vestibulum maximus vel lorem.

Quisque iaculis luctus velit fringilla congue. Sed lacinia neque non congue eleifend. In nec libero nibh. Aliquam condimentum sed magna ac scelerisque. Sed sit amet elementum massa, sed placerat nunc. Donec congue magna commodo metus dapibus efficitur. Etiam vel libero non nulla faucibus laoreet et ut velit. Proin eget quam ante. Nam nec molestie mauris, eu vehicula quam. Nunc non arcu elit. Nam felis magna, iaculis eu cursus sit amet, posuere non orci. Fusce convallis, eros vitae laoreet sodales, lacus tortor accumsan dui, commodo maximus justo eros vitae velit. Aliquam ornare malesuada nibh, nec ornare enim tincidunt id. Pellentesque pharetra venenatis hendrerit.

Etiam ut interdum arcu. Sed venenatis, augue ac feugiat vehicula, nibh ex tristique magna, a placerat ex lacus vitae libero. Duis nec libero nec nibh pharetra scelerisque. In feugiat, ligula et molestie luctus, diam enim lacinia leo, eget interdum lacus ligula at augue. Suspendisse potenti. Suspendisse molestie odio elit, condimentum viverra orci vehicula eu. Donec id nisl quis metus feugiat condimentum. Integer tincidunt, nibh eu semper dapibus, urna nulla finibus lectus, sed auctor nisl massa nec massa.
      </p>
    </div>
    <div class="sub-content" style="height: 100px">
      sub-content 3
    </div>
  </div>
  <div class="section bottom">
    Bottom
  </div>
</div>

问题原因 #

虽然canIuse显示Firefox支持break-inside属性，但当目标元素处于flex容器内部时，Firefox的分页规则会忽略该属性，这是Firefox的已知bug（编号1855702）。

临时解决方案 #

方案1：打印时将flex容器改为块布局

Firefox对块元素的分页控制支持更稳定，在打印媒体查询里把flex容器改成block布局，同时给目标元素设置break-inside: avoid：

@media print {
  .main-content, .section {
    display: block;
  }
  .sub-content.big-sub-content {
    break-inside: avoid;
  }
}

这样修改后，sub-content 2就能完整显示在同一打印页面，不会被分页截断。

方案2：添加旧版兼容属性

给目标元素同时加上page-break-inside: avoid（旧版分页属性），部分场景下Firefox对这个属性的兼容更好：

@media print {
  .sub-content.big-sub-content {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

注意：这个方案可能需要配合flex容器的调整才能生效，优先推荐方案1。

后续说明 #

目前该bug已提交至Firefox官方，后续版本更新可能会修复这个问题，上述临时方案可以先满足当前的打印分页需求。

内容的提问来源于stack exchange，提问作者thibsc