[解決済み】カラムモードでフレックスボックスのアイテムが折り返されるとき、コンテナの幅が大きくならない。

2022-04-14 10:53:07

質問

私は、以下のように動作するようにネストされたフレックスボックスレイアウトに取り組んでいます。

一番外側のレベル( ul#main ) は水平方向のリストで、項目が追加されると右に展開される必要があります。大きくなりすぎた場合は、水平方向のスクロールバーが表示されます。

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

このリストの各項目( ul#main > li ) には、ヘッダー ( ul#main > li > h2 ) と内側のリスト ( ul#main > li > ul.tasks ). この内部リストは垂直で、必要なときにカラムに折り返す必要があります。より多くのカラムに折り返される場合、その幅はより多くのアイテムを入れるために大きくなるはずです。この幅の拡大は、外側のリストを含む項目にも適用されなければなりません。

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

私の問題は、ウィンドウの高さが小さくなりすぎたときに、内側のリストが折り返されないことです。フレックスのプロパティをいろいろといじり、以下のガイドラインに従おうとしています。 CSS-Tricks（トリックしかし、うまくいきません。

この JSFiddle は、今のところ私が持っているものを示しています。

期待される結果 (自分が欲しいもの) :

実際の結果 (私が得たもの) :

古い結果 (2015年に取得したもの) :

アップデイト

いくつかの調査の結果、これはより大きな問題のように見え始めています。 主要なブラウザはすべて同じ動作をする そして、それは私のフレックスボックスのデザインがネストされていることとは関係ありません。よりシンプルなフレックスボックス列レイアウトでも、アイテムが折り返されるとリストの幅が広がらないのです。

この他のJSFiddle は、この問題を明確に示しています。現在のバージョンの Chrome、Firefox、IE11 では、すべての項目が正しく折り返されます。 row モードでは幅が広がらないが column モードで使用することができます。また、高さを変更しても、すぐに要素がリフローすることは全くありません。 column モードではありますが row モードと同じです。

ただし公式スペック (特に例5を見てください) は、私がやりたいことが可能であることを示しているようです。

どなたか、この問題の回避策を考えていただけませんか？

アップデイト2

JavaScriptを使って、リサイズイベントの際にさまざまな要素の高さや幅を更新することを何度も試した結果、その方法で解決しようとすると、複雑すぎて面倒だという結論に達しました。また、JavaScript を追加すると、できるだけクリーンであるべきフレックスボックスモデルが確実に壊れてしまいます。

今のところ、私は overflow-y: auto ではなく flex-wrap: wrap で、必要なときに内側のコンテナが縦にスクロールするようにします。これはきれいではありませんが、少なくとも使い勝手をあまり損なわない1つの方法です。

解決方法は？

問題点

これは、フレックスレイアウトの根本的な欠陥のように見えます。

列方向にあるフレックスコンテナは、追加の列を収容するために拡張することはできません。(これは flex-direction: row .)

この問題は何度も出題されていますが(以下のリストを参照)、CSSでの明確な回答はありません。

この問題は主要なブラウザで発生するため、バグと断定するのは難しいです。しかし、疑問は残ります。

<ブロッククオート

すべての主要ブラウザで、フレックスコンテナが行方向にはラップ時に展開されるが、列方向には展開されない？

少なくとも1つは正しく理解できると思うでしょう。理由は推測するしかない。もしかしたら、技術的に難しい実装で、今回のイテレーションでは棚上げになったのかもしれません。

UPDATEしてください。 Edge v16では、この問題は解決されているようです。

問題点の図解

OPは、問題を説明する有用なデモを作成しました。ここにコピーしておきます。 http://jsfiddle.net/nwccdwLw/1/

回避策オプション

Stack Overflowコミュニティからのハッキリとした解決策。

この問題はCSSだけでは解決できないようなので、JQueryによる解決策を提案します。
"ほとんどのブラウザがカラムフレックスコンテナを正しく実装していないのは不思議ですが、書き込みモードに対するサポートはそれなりに充実しています。そのため、縦書きモードの行フレックスコンテナを使用することができます。"

同じ問題を説明する他の投稿

フレックスボックスコンテナの幅が広がらない
display:flexコンテナを、折り返した内容で水平に展開するにはどうしたらよいですか？
Flex-flow：列の折り返し。コンテナの幅をコンテンツと同じにするには？
クロームでFlexbox Flex-flow column wrapのバグ？
flex-flow: column wrap"を使用するにはどうしたらよいですか？
コンテンツがカラムで折り返されたときにFlexコンテナが展開されない
flex-flow: 列の折り返し、フレックスボックス内で親コンテナのオーバーフローを引き起こす
Htmlフレックスボックスコンテナがラップされた子供の上に展開されない
フレックスボックスコンテナとはみ出したフレックスチャイルド？
折り返し項目に合わせて伸縮するフレックスボックスコンテナを作成するにはどうすればよいですか？
複数カラムがある場合に1カラムを計算するフレックスコンテナ
フレックスでコンテナをフル幅にする
Flexbox コンテナのサイズ変更は可能ですか？
Flex-Wrap Inside Flex-Grow
フレックスボックスが含まれるように拡大
フレックスボックス要素をそのコンテンツに展開しますか？
フレックスボックスの列をコンテンツに合わせて伸ばす
https://stackoverflow.com/q/48406237/3597276
flex-flow: カラムラップは親要素の幅を伸ばさない
なぜ、私の <ul> は、すべての <li> をカバーするために幅を拡大しないのでしょうか？
https://stackoverflow.com/q/55709208/3597276
Flexbox wrap で親の幅が増えない？
絶対 Flex コンテナが、定義された最大高さの正しい幅に変更されません。