如何让“page-break-inside:void”与“flex-wrap:wrap”很好地配合

我想得到page-break-inside: avoid以使用多行 Flexbox 布局的形式工作（使用flex-wrap: wrap）。目的只是为了避免打印时破坏表单问题。

这适用于单行 Flexbox 或不使用 Flexbox。查看打印预览http://jsfiddle.net/MartijnR/nSE3P/1/show/ http://jsfiddle.net/MartijnR/nSE3P/1/show/（请注意，未应用 Flexbox 类）

然而，当使用多行Flexbox时，它似乎忽略了page-break-inside: avoidCSS 规则。查看打印预览http://jsfiddle.net/MartijnR/nSE3P/2/show/ http://jsfiddle.net/MartijnR/nSE3P/2/show/（注意我将 flexbox 类添加到了部分元素中）

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

附言。我知道在示例代码中使用多行弹性框似乎没有意义，但实际上创建网格布局对我来说确实有意义。

我遇到了同样的问题，解决这个问题的唯一方法是使用不使用 Flexbox 的 Flexbox。 我使用以下规则做到了这一点：

.container {
  display: table;
}

.item {
  display: inline-block;
}

您可以在这里找到更多信息：https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox