How to get `page-break-inside: avoid` to work nicely with `flex-wrap: wrap`

flexbox, google-chrome, internet-explorer-11, page-break-inside

Solution

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

Problem

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.

Original source