IE10でのFlexboxでテキストがはみ出す

IE10でのみ長文のテキストがflexboxを指定しているときに文字が折り返されず横にはみ出してしまう現象があります、

chromeやfirefoxなどではflex-shrinkプロパティの基本の値が1担っていますが、

IEでは、flexプロパティが未指定の場合「flex:0 0 auto;」が適用されているため、
flexコンテナの幅に応じて縮小ができず、文字がはみ出してしまうことになります。

なので、対処法は、ベンダープレフィックスを付けて、IE10用にflex-shrinkプロパティが1になるよう
以下の記述をしてあげることで解決します。

-ms-flex: 0 1 auto;

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です