IEでflex-basisにbox-sizing: border-boxが効かない

Flex便利ですよね。 固定幅の横並びを実装したところIE11で崩れたので解決策です。

ul {
  display: flex;
  flex-wrap: wrap;
  outline: 1px solid #00f;
  margin: 10px auto;
  width: 200px;
}
li {
  box-sizing: border-box;
  flex-basis: 100px;
  outline: 1px solid #f00;
  padding: 20px;
  text-align: center;
}

表示

サンプル codepen.io

Chrome

IE11

解決策

max-width を指定することで解消できます。

li {
  max-width: 100px;
}

また、 flex-wrap: wrap が無いと border-box が効くようになるのでそちらから調整しても良いかもしれません。