【IE11】flexショートハンドにcalcが使えないし、flex-basisにはbox-sizingが効かない

投稿日 2019年12月2日
更新日 2020年6月13日
著者ひしもち
カテゴリー HTML/CSS

タイトルがすべてなのですが、やっと終わったと思ったコーディング、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でもちゃんと意図したとおりのタイムスケジュールが表示されるようになりました。

めでたしめでたし。