タイトルがすべてなのですが、やっと終わったと思ったコーディング、IE11で確認した時だけ盛大に崩れていたりすると絶望的な気持ちになりますよね。

つい最近絶望的な気持ちになったので、忘れないように対策も一緒に書いておきます。

calc使うならflexショートハンドは諦めるべし

タイムスケジュール的なものを作るために、以下のようなコードを書きました。
後で冷静になって考えると不要なプロパティがあったんですが主題とあまり関係ないのでそのまま……

<div class="wrap">
  <dl class="schedule">
    <dt>8:00</dt>
    <dd>起床</dd>
    <dt>9:00</dt>
    <dd>始業</dd>
    <dt>12:00</dt>
    <dd>ランチ</dd>
  </dl>
</div>
* {
  box-sizing: border-box;
}
.wrap {
  width: 600px;
}
.schedule {
  display: flex;
  flex-wrap: wrap;
}
.schedule dt {
  flex: 1 1 5em;
  margin: 0;
  padding-right: 1em;
  text-align: right;
}
.schedule dd {
  flex: 2 1 calc(100% - 5em);
  margin: 0;
  padding-left: 1em;
  border-left: 1px solid #AAA;
}

実際のコードは padding を調整したり疑似要素で飾りを入れたり、レスポンシブにも対応していて、もうちょっと、いやだいぶ、複雑になっていました。

IE11 で見ると、完全に width が auto な感じでギュウギュウになっていてとてもつらかった……。

調べてみると、どうやら IE11 では flex ショートハンドに calc が使えないんですね!
マジなのか。勘弁してください。

IE11 のことを忘れられない人は、flexショートハンドはやめて、全部バラバラに書きましょう。

flex-basis には max-width もセットで書くべし

ショートハンドを使わずにバラバラに書きなおしたコードがこちら。

* {
  box-sizing: border-box;
}
.wrap {
  width: 600px;
}
.schedule {
  display: flex;
  flex-wrap: wrap;
}
.schedule dt {
  flex-basis: 5em;
  margin: 0;
  padding-right: 1em;
  text-align: right;
}
.schedule dd {
  flex-grow: 2;
  flex-basis: calc(100% - 5em);
  margin: 0;
  padding-left: 1em;
  border-left: 1px solid #AAA;
}

IE11で見るとなぜかdtとddが横並びになっていなかった……

なんだか明らかに横幅がおかしいです。

IE11では、flex-basis に box-sizing が効かないらしいので、box-sizing: border-box; が効いておらず、padding分が飛び出しているんですね。

マジなのか。やめてください。

対策は、flex-basis と同じ値の max-width を記載しておくこと。

* {
  box-sizing: border-box;
}
.wrap {
  width: 600px;
}
.schedule {
  display: flex;
  flex-wrap: wrap;
}
.schedule dt {
  flex-basis: 5em;
  max-width: 5em;
  margin: 0;
  padding-right: 1em;
  text-align: right;
}
.schedule dd {
  flex-grow: 2;
  flex-basis: calc(100% - 5em);
  max-width: calc(100% - 5em);
  margin: 0;
  padding-left: 1em;
  border-left: 1px solid #AAA;
} 

こんな感じです。

これで、IE11でもちゃんと意図したとおりのタイムスケジュールが表示されるようになりました。

めでたしめでたし。

この記事を書いた人

ひしもち

京都の某制作会社で4年ほど勤務したのち、フリーランスとして活動することにしました。
現在の主なお仕事は、業務システムのUIデザインと、幼稚園・保育園さまのWebサイト制作です。
専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。