flexで作った部分がIE11で印刷されない

Question

レスポンシブの2カラムをflexで構築し、その中（メインエリア）の一部に、定義リストを入れました。

定義リストもflexを利用しました。

IE11で印刷すると、「ページをまたぐ場合」、定義リストが反映されずに印刷されてしまいます。

これには何か原因があるのでしょうか。

イメージとして下記画像のとおりです。

コードは、下記のとおりです。

<!-- コンテンツ全体 -->
<div id="contents">

    <!-- メイン -->
    <div id="main">
    メインエリア
    </div>

    <!-- サイド -->
    <div id="side">
    サイドバーエリア
	</div>

</div>




/* コンテンツ全体 */
#contents {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

/*メイン*/
#main {
    -webkit-flex: 1;
    flex: 1;
    margin-right: 20px;
    padding: 0;
}

/*サイド*/
#side {
    width: 250px;
}

@media screen and (max-width: 767px) {
    #contents {
        display: block;
    }
    
    #main,
    #side {
        margin: 0;
        padding: 0 30px;
        width: 100%;
    }
}

【メインエリアに入れた定義リスト】
    <div class="test">
        <dl>
            <dt>項目名①</dt>
            <dd>内容や説明文</dd>
            <dt>項目名②</dt>
            <dd>内容や説明文</dd>
            <dt>項目名③</dt>
            <dd>内容や説明文</dd>
            <dt>項目名④</dt>
            <dd>内容や説明文</dd>
            <dt>項目名⑤</dt>
            <dd>内容や説明文</dd>
            <dt>項目名⑥</dt>
            <dd>内容や説明文</dd>
            （略）
        </dl>
    </div>
    
    
    
    
.test {
    margin: 0 0 1em 0;
}

.test dl {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
}

.test dl,
.test dt,
.test dd {
    box-sizing: border-box;
}

.test dt {
    margin: 0;
    padding: 10px;
    border-top: 1px solid #ccc;
}

.test dd {
    margin: 0;
    padding: 10px;
    border-top: 1px solid #ccc;
}

.test dt:first-of-type,
.test dd:first-of-type {
    border-top: none;
}

.test dt {
    width: 30%;
    background: #eee;
}

.test dd {
    width: 70%;
    border-left: none;
}


@media only screen and (max-width: 767px) {
    .test dt {
        width: 100%;
        background: #eee;
    }
    .test dd {
        width: 100%;
        border-top: none;
        border-bottom: none;
    }
}

Answer 1

単純にIE11の印刷バグと思われます。
IEに限らず、他ブラウザでも要素途中でページをまたぐとおかしな印刷になりやすいので、
要素の途中でページをまたがないようにpage-break-before、page-break-after、page-break-insideなどで調整してみてはどうでしょうか？
http://caniuse.com/#search=page-break

Comments

[time_]

ありがとうございます。
返信遅くなりすみません。

そうなんですね。
Chromeの拡張（プラグイン）でキャプチャして、先方に送っていたのですが、
それでは納得しないお相手も出てきて悩んでました。

もう少しだけ、この質問をオープンにしたいと思いますm(__)m

Answer 2

お世話になっております。

ご回答頂いた後も、色々いじっておりましたらIE11ならびにfirefoxでも上記エラーが発生しました。

元々、大枠の2カラム、その中の定義リストをflexで対応しておりました。

これを……大枠の2カラムだけをfloatでの処理をしましたら、印刷で崩れることはなくなりました。

全てflex処理できれば、この上なく嬉しいのですが、現状はこことおりやっていこうと思いますm(__)m