page-break-after在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页,就像我应该的那样.当祖先是弹性框时,FF似乎不会破坏2页中的div.为什么？

Answer 1

我很确定在firefox中不起作用.

可以打破分页符的事情是(使用分页内部)

• 表
• 浮动元素
• 内联块元素
• 带边框的块元素

要定义是否必须执行中断,应用以下规则:

1.如果三个有关值中的任何一个是强制中断值,即始终为左,右,页,列或区域,则它具有优先权.如果有几个有关的值是这样的中断,则会获取流中最新出现的元素之一(即,break-before值优先于break-after值,break-after值本身优先于break-内部价值).

2.如果三个相关值中的任何一个是避免中断值,即避免,避免页面,避免区域,避免列,则不会在该点应用此类中断.

一旦应用了强制中断,可以根据需要添加软中断,但不能在相应的避免值中解析的元素边界上添加.

打破之后 - CSS | MDN

简而言之,在您的情况下,因为您在里面使用它将flex无法正常工作.

Answer 2

display: flex;

默认情况下，该属性不跨浏览器兼容。

如果您有一个例子或详细说明您想要实现的目标，那将会很有帮助，但我认为这会起作用：

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works)*/
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */