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
flex-directionを指定した時に IE11で表示がおかしくなる | WEB PIXY
CSS3から新たに追加された Flexible Boxはプロパティが豊富で可変レイアウトに柔軟に対応できるのでレスポンシブデザインでの制作には欠かせないものになっています。しかし IEでデバッグをしていた時に flex-directionに関連するバグのようなものに遭遇しました。 IEだけ画像に余分な隙間ができる IE 11では flex-directionに columnや column-reverseを指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしまいます。サンプル画像内にある写真の下のグレーの部分がそれにあたります。 解決方法 解決方法はシンプルで min-heightを利用します。IE 11以外のブラウザでの表示に影響はありません。以下がサンプルのコードです。 <div class="flex"> <p class="flex-inner">L
IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない
公開2015.08.07 更新2017.12.03 仕事・技術 Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません；； 今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。 以下のようなコードがあるとします。 <div id="flexParent"> <header>ヘッダー</header> <main> <div class="flexChild left">左</div> <div class="flexChild right">右</div> </main> <footer>フッター</footer> </div> よくあるカタチで、縦並びにヘッダー、メインコンテンツ（左右に２カラムあるとします）、フッターがあります。 これら
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
IE11で「flexbox」「min-height」「aligin-items: center」の組み合わせが効かない時の対処法
ChromeとEdgeでは意図通りに動く。でも、IE11だけ動かない・・・ そんなバグがあって四苦八苦したので対処法をメモ。 どうにかして「Chrome」「Edge」「IE11」の動作を同一にすることが出来ました。 やりたいこと こんな感じ。 div要素の中に文字を均等に真ん中に配置したい。 その時の記述がこんな感じ。 <div class="parent"> <span class="child"> test </span> </div> .parent { display: flex; align-items: center; width: 100%; background-color: green; min-height: 90px; } .child { } flexboxのalign-items: centerで、 高さ指定した親のdiv要素に対してspan要素を中央寄せしていま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
