Разрыв страницы после того, как не работает в flexboxes

Это не приводит к ожидаемому результату внутри предварительного просмотра в 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 не разбивает div на 2 страницы, когда предок является гибкой коробкой. Почему?

Ответы

Ответ 1

Я уверен, что это не сработает в firefox.

Вещи, которые могут нарушить разрывы страниц (используя разрывы страниц внутри)

  • таблицы
  • плавающие элементы
  • элементы встроенного блока
  • блокировать элементы с границами

Чтобы определить, должен ли выполняться разрыв, применяются следующие правила:

1.Если любое из трех соответствующих значений является значением принудительного прерывания, то есть всегда, слева, справа, странице, столбце или области, имеет приоритет. Если несколько из соответствующих значений - такой разрыв, один из элемент, который появляется последним в потоке (т.е. значение break-before имеет приоритет над значением break-after, которое сам имеет приоритет над внутренним значением).

2. Если любой из три соответствующих значения - это значение исключения, которое следует избегать, избегать страницы, избегать области, избегать столбца, такой разрыв не будет применяться в этот момент.

После применения принудительных перерывов могут быть добавлены мягкие перерывы, если необходимо, но не на границах элементов, которые разрешаются в соответствующем избегать значения.

break after - CSS | MDN

Короче говоря, в вашем случае причина, по которой вы его используете внутри flex, не будет работать.

Ответ 2

Firefox не делает правку страниц даже с элементами float, поэтому я не удивлен, что flex не работает. Источник: CSS-брейк не работает во всех браузерах

В общем, поддержка страниц в Firefox невелика. См.: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

Если вам нужны последовательные результаты кроссбраузерной печати, ответ почти всегда будет использоваться для создания на стороне сервера PDF с помощью инструмента, такого как wkhtmltopdf или princexml.

Ответ 3

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+ */