質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1824閲覧

flexbox入れ子の flow:column wrap 指定時の横幅について

hirahiro

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/21 06:55

編集2019/08/21 06:56

子の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(失敗)
![イメージ説明]
IE11(成功)
イメージ説明

chromeでは折り返されたflex-itemの横幅を親要素が取得できずはみ出してしまっています。
ie11では横幅が取得でき、赤いボックスのサイズが可変しています。

ブラウザに依存せずie11のような結果を出すための、スタイル指定の方法をご教授願えませんでしょうか。
詳しい方、お力沿いのほどよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

flex-flow: column wrap; のときのバグのようです。
https://codeday.me/jp/qa/20190119/139410.html
https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width

grid 対応ブラウザに対しては Grid Layout にしてみてはどうでしょうか?

CSS

1@supports (display: grid) { 2 .cnt__inner { 3 display: grid; 4 grid-template-rows: repeat(auto-fill, minmax(1.2em, 1fr)); 5 grid-template-columns: repeat(auto-fit, minmax(calc(6em + 30px), 1fr)); 6 grid-auto-flow: column; 7 } 8}

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

投稿2019/08/21 08:10

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hirahiro

2019/08/21 10:56

回答ありがとうございました。 バグなのですね。。display: grid の採用も検討してみます。
hirahiro

2019/08/23 03:02

回答締め切らせていただきます。 こちらベストアンサーにさせていただきますね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問