IE11だけflexboxが横に大きくはみ出る

Question

レスポンシブデザインで画像３つの横並びをしたいと思って、flexboxで作っているのですが、
IE11だけ右端に大きくはみ出してしまいます。

いろいろ調べて、考えられるものを.judicialBox__mainに指定しているのですが、どうもうまくいきません。

Google ChromeやEdge、Saffariなどは問題ありません。

該当のソースコード

    <section class="judicialBox">
        <article class="container">
            <div class="headBox">
                <h3>IE11ではみ出る・・・</h3>
            </div>
            <div class="judicialBox__main">
                <div class="items"><img src="test01.png" alt=""></div>
                <div class="items"><img src="test02.png" alt=""></div>
                <div class="items"><img src="test03.png" alt=""></div>
            </div>
        </article>
    </section>

.judicialBox {
  padding: 6rem 0; }
  .judicialBox .headBox {
    text-align: center;
    margin-bottom: 4rem; }
    .judicialBox .headBox h3 {
      color: #d62264;
      font-family: "Roboto", sans-serif;
      margin-bottom: 1rem; }
      .judicialBox .headBox h3 span {
        font-size: 4rem; }
    .judicialBox .headBox p {
      margin-bottom: 0;
      font-weight: 600;
      font-size: 1.7rem; }
  .judicialBox__main {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;
    -ms-flex: 0 1 auto;
    justify-content: space-between; }
    .judicialBox__main .items {
      padding: 0 4rem; }

-ms-flexboxが効かないと、なかなか厳しい感じなのですが、
何かヒントだけでもいただけると幸いです。m(__)m

＜補足＞
一部画像を加工していますが、スクリーンショットはこんな感じです。

Comments

[m.ts10806]

IEはマイクロソフトの開発者が「今後は使うな｣的な発言をしていましたが、それでも対応をしていく必要があるものでしょうか？

[yytop]

確かにそうなんですよね、、ただクライアントから修正指示が出ていまして。。

[cerfweb]

ご提示されているコードを再現してもどこが問題なのかわかりませんので、実際にどうはみ出ているのかがわかるようなスクリーンショットを見せていただけますか。

[yytop]

ありがとうございます。分かりにくいかもしれませんが、スクリーンショットを追加してみました。

[cerfweb]

<section class="judicialBox">の親要素のhtmlやcssを疑ってみてはと思うのですが、その辺りもご提示いただけますか。

[yytop]

ありがとうございます。先ほど解決しました。

Answer 1

再現環境が作成できていないので、どの問題かはわかりませんが、下記ページにバグと対策がまとめられています。

【flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita】
https://qiita.com/hashrock/items/189db03021b0f565ae27

Comments

[yytop]

ありがとうございます。しかし、私の問題の解決策は見つけられませんでした。。

[kei344]

はみ出しに対しての対策がいくつかありましたが、そのどれも効かなかったのでしょうか。

[yytop]

関係する要素/プロパティに該当するものが見当たりませんでした。見落としていたらすみません。。

[kei344]

https://qiita.com/hashrock/items/189db03021b0f565ae27#7-flex-basis%E3%81%8Cborder-box%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84
提示のコードであれば上記は該当します。

[yytop]

なるほど、分かりました！下記、追記したら正しく表示されました。
ありがとうございます！

.judicialBox__main .items {
width:100%;
flex-basis: auto;
padding: 0 4rem; }