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.
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