flexbox のバグ
このページは、CSS の flex のバグについてまとめる予定のページです。 (個人的に遭遇して困ったものが中心になっています。他のバグについては参考リンクを参照してください)
flexbox の孫要素に height:100% が効かない (Safari 10)
- 回避方法: 子要素自体も
display: flexにし、孫要素を引き伸ばすと回避できます。 - 参考: html - flexboxの孫要素にheight:100%が効かない理由はなぜですか - スタック・オーバーフロー
<img> が flex アイテムになっている場合、<img> のアスペクト比が無視されて画像が潰れる (IE11)
- 回避方法: <img> を flex アイテムにしない (img を div で囲って div を flex アイテムにする)
- 参考: flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
flex の入れ子をすると子の flex アイテムのテキストが折り返されなくなる (IE11)
- サンプル: flex の入れ子をすると子の flex アイテムのテキストが折り返されなくなる (IE11)
- 回避方法: 子の flex アイテムに width: 100% など width を指定すると回避できます。(上記)
flex アイテムを position: absolute すると位置がずれる (IE11)
- 回避方法:
position: absoluteにしたい要素を flex アイテムにしない - 参考: フレックスコンテナ内で絶対位置指定された要素の静的位置 | masuP.net