[CSS][メモ] IE11でflex-basisにbox-sizingが効かない

以下のような、よくあるボックス横並びのUIをコーディングしていて遭遇したのでメモ。

ul {
  display: flex;
  flex-wrap: wrap;
  width: 960px;
  margin: 0 20px;
}

li {
  flex: 0 0 184px;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
}

上記のコードでChromeでは1行5列のリストが表示されるが、
IE11ではbox-sizingが効かず、5列目が落ちてしまう。

これに対処する為には、以下のようにmax-widthをflex-basisと同値で指定する必要がある。

ul {
  display: flex;
  flex-wrap: wrap;
  width: 960px;
  margin: 0 20px;
}

li {
  flex: 0 0 184px;
  max-width: 184px; /* ← これを追加 */
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
}

これでIE11でも正しく表示できる。