前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。
今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。
バグの詳細
IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。
対処法1
当該のflexアイテムにmax-widthを指定する。
flex: 1 1 75%;
max-width: 75%;
padding: 0 4rem 0 0;対処法2
flex-basisをautoにして、widthを指定する。
flex: 1 1 auto;
width: 75%;
padding: 0 4rem 0 0;対処法3
borderとpaddingのないラッパー要素を入れて、その要素にflexを指定する。divを増やすのは個人的には望ましくないですが、逆にHTMLやCSSを複雑にするよりは良いですかね。
メモ
- Edgeで同様のバグがあったようですが修正されています。
- IE10でも同様のバグがあるとのことですが、上記の対処法はテストできてないです。すみません。
flexbox関連のバグの他の記事
さいごに
現場からは以上です！Let’s master flexbox including its bugs!
2020年3月25日に公開され、2020年4月17日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。