先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw バグの詳細 以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます(IE10も同様)。 flex: 1 1 calc(25% - 1rem); 対処法 IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。 flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 1rem); IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです(すみません、テストしてません)。 メモ Edgeでも同様のバグがあったそうですが修正されています。 MS Edge
![IE11でflexプロパティに書いたcalcが機能しないバグ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7edc7f5244446496d6acdf865591d8ce754abecc/height=288;version=1;width=512/https%3A%2F%2Fparashuto.com%2Frriver%2Fwp%2Fwp-content%2Fuploads%2F2020%2F03%2Fflexbugs.png)