IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ

Advertisement

前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。

今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。

バグの詳細

IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderpaddingが指定されていると想定通りのレイアウトになりません。

対処法1

当該のflexアイテムにmax-widthを指定する。

flex: 1 1 75%;
max-width: 75%;
padding: 0 4rem 0 0;

対処法2

flex-basisautoにして、widthを指定する。

flex: 1 1 auto;
width: 75%;
padding: 0 4rem 0 0;

対処法3

borderpaddingのないラッパー要素を入れて、その要素にflexを指定する。divを増やすのは個人的には望ましくないですが、逆にHTMLやCSSを複雑にするよりは良いですかね。

メモ

  • Edgeで同様のバグがあったようですが修正されています。
  • IE10でも同様のバグがあるとのことですが、上記の対処法はテストできてないです。すみません。

さいごに

現場からは以上です!Let’s master flexbox including its bugs!

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。