IE11でflexboxを入れ子にするとテキストが折り返さないバグ
先日紹介したflexbox関連のバグを検証していたときに遭遇したバグがあったのでメモっておきます。今回は入れ子にしたflexboxに関するバグです。 バグの詳細 IE11では、flexboxを入れ子にすると、入れ子にしたflexboxのflexアイテム内のコンテンツがコンテナより大きい場合、はみ出して表示されてしまいます。たとえば、下のIE11での表示のキャプチャ画像のように長いテキストが折り返さなくなってしまいます。 本来は下のFirefoxでの表示をキャプチャした画像のように、display: flex;によってカラム表示になってテキストが折り返して表示されます。 デモはこちら このバグが発生するソースコードは以下のようになります。 HTML <div class="flex-outer"> <div class="flex-outer__item"> <div class="flex
IE11でflex-direction: columnにしてalign-items: centerを指定すると中のコンテンツがはみ出してしまうバグ
先日コーディングをしていて、またIE11のflexbox関連のバグに遭遇したのでメモっておきます。今回は、flex-direction: column;とalign-items: center;を指定すると発生するバグです。 バグの詳細 IE11では、flexboxにflex-direction: column;とalign-items: center;を指定すると、flexアイテムのコンテンツがコンテナより大きい場合にはみ出してしまいます。たとえば、長い文章が入っていると、以下のように横にはみ出てしまいます。 IE11での表示 本来、グレーのボックス内（flexアイテム内）におさまってほしいテキストがはみ出してしまいます。 Firefoxでの表示 Firefox（Mac 77.0.1）では、意図したとおりグレーのボックス内にテキストがおさまります。 デモはこちら このバグが発生するソース
IE11でflexboxにmin-heightが効かなくてalign-items: centerが使えないバグ
flexbox関連のバグをメモ的に書き溜めています。今回はIE11のバグで、flexを指定した要素にmin-heightを指定すると無視されるバグについてです。 バグの詳細 IE11ではdisplay: flex;を指定した要素にmin-heightを指定しても無視されます。IE11ではflexが指定されたflexコンテナの高さは認識されるがflexアイテムの高さは認識されないそうです（Flexbugs参照 ）。そのため、align-items: center;で中の要素を上下中央に配置できません。 僕の場合、以下のようなレイアウトの実装の際にこのバグにはまりました。 幅が可変でテキストの長さが異なるレイアウトで、テキストが1〜3行の場合はmin-heightで高さを統一して上下中央寄せにして、4行以上になる場合はテキストの高さに合わせて箱の高さが可変するレイアウトです。 IE11だと以下
IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ
前回の記事に続き、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; 対
IE11でflexプロパティに書いたcalcが機能しないバグ
先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw バグの詳細 以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます（IE10も同様）。 flex: 1 1 calc(25% - 1rem); 対処法 IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。 flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 1rem); IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです（すみません、テストしてません）。 メモ Edgeでも同様のバグがあったそうですが修正されています。 MS Edge
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
