puppeteer - 使用 puppeteer 生成 PDF 时 "break-inside: avoid"被忽略

Question

我正在使用 puppeteer v 5.2.1 从网页生成多页 PDF。
我正在使用以下内容来确保此块元素不会在分页符处被切断:

.wrapper {
    display: block;
    float: left;
    break-inside: avoid;
}

我已经使用@page 设置了其他分页媒体内容，以查看 Puppeteer 可以处理分页媒体。
但我的块元素仍然被切断？
Pupetteer 正在模拟屏幕。虽然当它使用默认打印仿真时，我得到了相同的结果。
我的设置中是否缺少某些内容？

Answer 1

好的，我已经解决了这个问题。
问题是我的 .wrapper 元素的容器元素是一个内联块。
包装器本身是块元素，因此它们遵循内部 CSS。但是，如果包含多个这些 .wrapper 元素的周围容器是内联块，那么页面媒体 CSS 会将其视为一个整体块，因此用户代理将选择在结束时拆分此块页面 - 不尊重它的块 child 。
这是根据规范设计的:
https://www.w3.org/TR/css-break-3/#end-block

.parent {
  display: block;
}

.wrapper {
  display: block;
  float: left;
  break-inside: avoid;
}

<div class="parent">
  <div class="wrapper">
    <div>Some content</div>
  </div>
  <div class="wrapper">
    <div>Some content</div>
  </div>
  <div class="wrapper">
    <div>Some content</div>
  </div>
</div>

在我最初的问题中，我的 parent 被错误地声明为

.parent {
  display: inline-block;
}