web担当のkuwaraです。

備忘も兼ねて作業中に遭遇したバグをご紹介いたします。

CSS3には「flexbox」と言うものがありまして、
これを使うとレスポンシブデザインの制作がぐんと楽になるらしいのです。

実装当初は試してみるもブラウザ側の対応状況がまちまちで却って面倒くさい事になっていましたが、
近年では「flexboxを使わざるものはレスポンシブにあらず」といった風潮でなんだかなぁと感じております。

勉強がてらに触ってみたのですが……見事にはまりました。
ブラウザ全然対応してねーじゃねーか！

でもまぁ、以前よりはだいぶマシなので無い知恵絞って対応してみました。

文字だけで説明すると表題の通り、「IE11でflex-basisにbox-sizingが効かないバグ」なのですが、
百聞は一見にしかず。
こういったものをご用意いたしました。

バグ確認用ページ
http://www.fujipro-inc.com/demo/kuwara/20151130/index.html

このページをInternetExplorer、Chrome、firefoxでそれぞれ閲覧してみてください。
firefox以外はそれなりに表示はされますがちょっとずつ破綻しています。
関係ないですが無駄に右の境界線が動かせるようにしております。

結論からすると
 flex-basisを設定する時は同じ値をmax-widthに仕込んで置くと大丈夫
となります。

このバグについてを説明している日本語のページが見つからなかったので
同じ現象に苦しむ誰かの力になれば幸いです。

ちなみにchromeで親要素の高さが明示されていない状態で子にalign-items: stretchが効かないのは既知の不具合らしいです。
同様にfirefoxも親要素の高さが明示されていない状態でpaddingを%で取ると0になるのも既知の不具合らしいです。
知らないと平気で何時間も取られてしまうので是非覚えておきたいですね。