Flexbox アイテムが列モードで折り返されるときにコンテナの幅が増えない

Question

私は次のように動作するネストされた Flexbox レイアウトを開発しています:

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

リーリー

このリストの各項目 (ul#main > li) にはヘッダー (ul#main > li > h2) と内部リスト () があります。 ul#main > li > ul.tasks)。この内部リストは垂直方向であり、必要に応じて列に折り返される必要があります。より多くの列にラップされると、より多くの項目を収容できるスペースを確保するために幅が増加するはずです。この幅の増加は、外側のリストに含まれる項目にも適用されます。

リーリー

私の問題は、ウィンドウの高さが小さすぎると、内側のリストが折り返されないことです。 CSS-Tricks のガイドラインに厳密に従おうとして、すべての Flex プロパティを何度も改ざんしてみましたが、成功しませんでした。

この JSFiddle は、これまでに私が持っているものを示しています。

期待される結果 (私が望むもの):

実際の結果 (得られたもの):

古い結果 (2015年に得られた結果) :

更新

いくつかの調査の後、これはさらに大きな問題であるように見え始めました。 すべての主要なブラウザは同じように動作します。これは私のネストされた Flexbox デザインとは関係ありません。より単純な Flexbox 列レイアウトでも、項目が折り返されてもリストの幅は増加しません。

別の JSFiddle は問題を明確に示しています。 Chrome、Firefox、IE11 の現在のバージョンでは、すべての項目が正しく折り返されます。row モードではリストの高さは増加しますが、column モードではリストの幅は増加しません。また、column モードの高さを変更する場合、要素はすぐにはリフローされませんが、row モードではリフローが行われます。

ただし、公式仕様 (詳細は例 5 を参照) は、私がやりたいことは可能であることを示しているようです。

誰かこの問題の解決策を見つけられますか?

アップデート 2

サイズ変更イベント中に JavaScript を使用してさまざまな要素の高さと幅を更新しようと何度も試みた結果、この方法で解決しようとするのは複雑すぎて面倒であるという結論に達しました。また、JavaScript を追加すると Flexbox モデルが壊れることは間違いなく、可能な限りクリーンな状態に保つ必要があります。

ここで、flex-wrap:wrapper ではなく overflow-y:auto に戻り、必要に応じて内部コンテナが垂直にスクロールできるようにします。見た目は良くありませんが、少なくとも使いやすさをあまり損なわないアプローチです。

Answer 1

パーティーに遅刻しましたが、何年も経った今でもこの問題が解決していません。最終的にグリッドを使用した解決策を見つけました。コンテナでは

を使用できます リーリー

Flexbox の問題とグリッド修正を切り替えるための CodePen の例があります: https://codepen .io/MandeeD/pen/JVLdLd

Answer 2

＃＃＃質問＃＃＃

これは FlexLayout の根本的な欠陥のようです。

列指向のフレックス コンテナーは、追加の列を収容するために拡張されません。 (これは

flex-direction: row

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

この問題はすべての主要なブラウザで発生するため、これをバグとして特定することは困難です。しかし、次のような疑問が生じます:

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

更新:

この問題は Edge v16 で解決されたようです。

問題の説明

---

OP は、問題を説明するために役立つデモを作成しました。ここにコピーしました:

http://jsfiddle.net/nwccdwLw/1/

p>ソリューションのオプション

---

Stack Overflow コミュニティからのハッキーなソリューション:

• 「この問題は CSS だけでは解決できないようですので、JQuery ソリューションを使用することをお勧めします。」

• 「奇妙なことに、ほとんどのブラウザは列フレックス コンテナを正しく実装していませんが、書き込みモードのサポートは非​​常に優れています。そのため、行フレックス コンテナを縦書きモードで使用できます。」

さらなる分析

---

• Chromium バグレポート

• マーク・エメリーの答え

---

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

• フレックス ボックス コンテナの幅は拡張されません
• display:flex コンテナをラップされたコンテンツとともに水平方向に展開するにはどうすればよいですか?
• Flex-flow: 列の折り返し。コンテナの幅をコンテンツと同じに設定するにはどうすればよいですか?
• Chrome での Flexbox Flex-flow 列の折り返しエラー?
• 「フレックスフロー: 列ラップ」の使用方法?
• コンテンツが列にラップされている場合、Flex コンテナは展開されません
• flex-flow: 列の折り返しにより、親コンテナがフレックス ボックス内でオーバーフローします
• HTML Flexbox コンテナがラップされた子で展開されない
• Flexbox コンテナとあふれた Flex の子?
• ラップされたアイテムに合わせて伸縮する Flexbox コンテナを作成するにはどうすればよいですか?
• 複数の列がある場合、Flex コンテナは 1 つの列を計算します
• Flex を使用してコンテナを全幅にします
• Flexbox コンテナのサイズは変更できますか?
• Flex-Wrap 組み込み Flex-Grow
• フレックスボックスには段階的に含まれます
• フレックスボックス要素をそのコンテンツまで展開しますか?
• フレックスボックス列はコンテンツに合わせて伸縮します
• https://stackoverflow.com/q/48406237/3597276
• flex-flow: 列の折り返しによって親要素の幅が拡張されません
• 私の
  の幅がすべての
  • をカバーするように拡張されないのはなぜですか?
• https://stackoverflow.com/q/55709208/3597276
• フレックスボックスのラッピングでは親の幅は増加しませんか?
• Absolute Flex コンテナが、最大高さを定義する正しい幅に変更されていません
• 親インライン ブロック div は、flex-wrap を使用した子 div より狭いです