css - 分页后不能在 flexboxes 中工作

Question

这不会在 Firefox 的打印预览中产生预期的结果:

<aside>
  side
</aside>

<div>
  <p> page 1 </p>
  <p> page 2 </p>
</div>

CSS:

body{
  display: flex;
}

aside{
  flex: none;
  width: 100px;
}

div{
  flex: auto;
}

p{
  break-after: always;
  page-break-after: always;
}

在 Chrome 和 IE 中，我得到了 2 个页面。当祖先是 flexbox 时，FF 似乎不会将 div 分成 2 页。为什么？

Answer 1

我很确定这在 Firefox 中不起作用。

可以分页的有(里面使用分页)

• 表格
• float 元素
• 行内 block 元素
• 带边框的 block 状元素

To define if a break must be done, the following rules are applied:

1.If any of the three concerned values is a forced break value, that is always, left, right, page, column or region, it has precedence. If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the break-before value has precedence over the break-after value, which itself has precedence over the break-inside value).

2.If any of the three concerned values is an avoid break value, that is avoid, avoid-page, avoid-region, avoid-column, no such break will be applied at that point.

Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.

break after - CSS | MDN

简而言之，在您的情况下，因为您在 flex 中使用它是行不通的。