29

I am trying to get page-break-inside: avoid to work in a form that uses a multi-line flexbox layout (with flex-wrap: wrap). The goal is simply to avoid breaking form questions when printing.

This works well with a single line flexbox or without a flexbox. See the print preview of http://jsfiddle.net/MartijnR/nSE3P/1/show/ (note the flexbox class is not applied)

However, when using a multi-line flexbox, it seems to ignore the page-break-inside: avoid css rule. See the print preview of http://jsfiddle.net/MartijnR/nSE3P/2/show/ (note I added the flexbox class to the section element)

<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;
    }
}

I've tried in both the latest Chrome and IE11 and both demonstrate the same behaviour which makes me think it's not a browser bug. (FF doesn't support multi-line flexboxes yet, so it won't work there until early next year)

Does anybody know how to get flex-wrap: wrap flexbox layouts to play nicely with page-break-inside:avoid?

PS. I'm aware that in the sample code it doesn't seem to make sense to use a multi-line flexbox, but in reality it does make sense for me to create a grid layout.

Martijn van de Rijdt
  • 1,020
  • 3
  • 10
  • 16
  • Some issue with page-break-inside: #1) Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders. #2) You cannot use this property on absolutely positioned elements #3)No versions of Internet Explorer (including IE8) support the property value "inherit" and Firefox, Chrome, and Safari do not support the property value "avoid". – Neha Dec 17 '13 at 22:35
  • 1
    Thanks, but this seems a cut-and-paste of old information. No need to support old browsers in my case. – Martijn van de Rijdt Dec 18 '13 at 15:54
  • why the prefixes then? – nihilok Jan 23 '23 at 17:32
  • @nihilok 9 years ago, at least some of these prefixes were required for modern browser versions. – Martijn van de Rijdt Feb 08 '23 at 22:26

3 Answers3

25

I had the same problem and the only way to overcome it was to use flexbox without flexbox. I did that using the following rules:

.container {
  display: table;
}

.item {
  display: inline-block;
}

You can find more information here: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Dimitris Makris
  • 461
  • 5
  • 16
  • 1
    This worked when I used it on the item with the `flex-wrap: wrap` on it. However, the rows were no longer all items of the same height, they flexed to whatever height their content wanted. – allicarn Oct 03 '17 at 19:44
  • 1
    Add this styling for `row-reverse`: `.container { display: table; direction: rtl; } .item { display: inline-block; direction: ltr; }` – Tobi G. Aug 19 '19 at 12:56
4

Played around a bit with your issue. If you are primarily concerned with printing problem only then this should help:

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

Flexbox class is still applied but in case of printing its display property is overridden with:

.flexbox {
        display: block;
}

This made it respect the page break policy. Check the print preview http://jsfiddle.net/nSE3P/3/show

IKA
  • 690
  • 5
  • 21
  • 2
    Thanks for looking into this IKA. Unfortunately, I need the fancy flexbox behaviour also in the print view (and this removes it). The workaround I have implemented is to reproduce the flexbox behaviour in javascript in the print view (during print view generation, the long delay this causes is acceptable). – Martijn van de Rijdt May 12 '14 at 16:43
-1

A little late to this discussion but thought I'd share what I did to have a similar flex-wrap type style for print.

Leveraging what Dimitris Makris had previously added, I also went ahead and added the following bit to each .item to try to preserve height.

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