Как получить `page-break-inside: избежать`, чтобы красиво работать с`flex-wrap: wrap`

Question

Я пытаюсь получить page-break-inside: avoid работать в форме, которая использует многострочный макет flexbox (с flex-wrap: wrap). Цель состоит в том, чтобы просто не ломать вопросы формы при печати.

Это хорошо работает с однолинейным flexbox или без flexbox. Смотрите предварительный просмотр http://jsfiddle.net/MartijnR/nSE3P/1/show/ (обратите внимание, что класс flexbox не применяется)

Однако при использовании многострочного flexbox он игнорирует page-break-inside: avoid Правило CSS. Смотрите предварительный просмотр http://jsfiddle.net/MartijnR/nSE3P/2/show/ (обратите внимание, что я добавил класс flexbox в элемент section)

<form>
   <section class="flexbox">
        <label class="flex-100">
            <input type="text" />
        </label>
        <label class="flex-100">
            <input type="text" />
        </label>
        <!-- etc -->
        <label class="flex-100">
            <input type="text" />
        </label>
        <label class="flex-100">
            <input type="text" />
        </label>
    </section>
</form>

body, div, article, section, label {
    position: relative;
}
.flexbox {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -webkit-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
}
label {
    display: block;
    margin: 10px 0;
    position: relative;
}
.flex-100 {
    min-height: 300px;
    border: 1px solid black;
    min-width: 80%;
    -webkit-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
}
input {
    display: block;
}
@media print {
    label {
        page-break-inside: avoid;
        -webkit-region-break-inside: avoid;
    }
}

Я попробовал и в последних Chrome и IE11, и оба демонстрируют одинаковое поведение, что заставляет меня думать, что это не ошибка браузера. (FF пока не поддерживает многострочные flexbox, поэтому он не будет работать там до начала следующего года)

Кто-нибудь знает, как получить flex-wrap: wrap макеты flexbox для приятной игры page-break-inside:avoid?

PS. Я знаю, что в примере кода не имеет смысла использовать многострочный flexbox, но на самом деле для меня имеет смысл создать сетку.

Answer 1

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

.container {
  display: table;
}

.item {
  display: inline-block;
}

Вы можете найти больше информации здесь: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Answer 2

Поигрался немного с вашей проблемой. Если вас в первую очередь волнует только проблема печати, это должно помочь:

http://jsfiddle.net/nSE3P/3/

Класс Flexbox по-прежнему применяется, но в случае печати его свойство display переопределяется с помощью:

.flexbox {
        display: block;
}

Это сделало это уважать политику разрыва страницы. Проверьте предварительный просмотр печати http://jsfiddle.net/nSE3P/3/show

Answer 3

Немного опоздал к этому обсуждению, но подумал, что поделюсь тем, что сделал, чтобы подобный стиль типа flex-wrap для печати.

Используя то, что ранее добавил Димитрис Макрис, я также добавил следующий фрагмент к каждому элементу, чтобы попытаться сохранить высоту.

.item:nth-child(5n+1){ /* Change this to your liking. (wrap after nth item) */
  clear: left;
}