子のflexbox(column wrap)の横幅が取得できない
下記のようなコードを記述しました。
html
1<div class="wrap"> 2 <div class="cnt" style="background:#a00"> 3 <p class="cnt__ttl">見出し</p> 4 <div class="cnt__inner"> 5 <p>あいう</p> 6 <p>えお</p> 7 <p>かきくけこ</p> 8 <p>さしすせ</p> 9 <p>そたちつ</p> 10 <p>てと</p> 11 <p>なにぬ</p> 12 <p>ねのはひふへ</p> 13 <p>さしすせ</p> 14 <p>そたちつ</p> 15 <p>てと</p> 16 <p>なにぬ</p> 17 <p>ねのはひふへ</p> 18 <p>さしすせ</p> 19 <p>そたちつ</p> 20 <p>てと</p> 21 <p>なにぬ</p> 22 <p>ねのはひふへ</p> 23 <p>さしすせ</p> 24 <p>そたちつ</p> 25 <p>てと</p> 26 <p>なにぬ</p> 27 <p>ねのはひふへ</p> 28 </div> 29 </div> 30 <div class="cnt" style="background:#0a0"> 31 <p class="cnt__ttl">見出し</p> 32 <div class="cnt__inner"> 33 <p>かきくけこ</p> 34 <p>さしすせ</p> 35 <p>そたちつ</p> 36 <p>てと</p> 37 <p>なにぬ</p> 38 </div> 39 </div> 40 <div class="cnt" style="background:#00a"> 41 <p class="cnt__ttl">見出し</p> 42 <div class="cnt__inner"> 43 <p>てと</p> 44 <p>なにぬ</p> 45 <p>ねのはひふへ</p> 46 </div> 47 </div> 48</div>
css
1/* reset.css 省く */ 2.wrap{ 3 display: flex; 4} 5.cnt{ 6 width: auto; 7 box-sizing: border-box; 8} 9.cnt__inner{ 10 display: flex; 11 flex-direction: column; 12 flex-wrap: wrap; 13 height: 150px; 14} 15.cnt__inner p{ 16 padding: 0 15px; 17}
実行結果
chromeでは折り返されたflex-itemの横幅を親要素が取得できずはみ出してしまっています。
ie11では横幅が取得でき、赤いボックスのサイズが可変しています。
ブラウザに依存せずie11のような結果を出すための、スタイル指定の方法をご教授願えませんでしょうか。
詳しい方、お力沿いのほどよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/21 10:56
2019/08/23 03:02