私は次のように動作するネストされた 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 を参照) は、私がやりたいことは可能であることを示しているようです。
誰かこの問題の解決策を見つけられますか?
サイズ変更イベント中に JavaScript を使用してさまざまな要素の高さと幅を更新しようと何度も試みた結果、この方法で解決しようとするのは複雑すぎて面倒であるという結論に達しました。また、JavaScript を追加すると Flexbox モデルが壊れることは間違いなく、可能な限りクリーンな状態に保つ必要があります。
ここで、flex-wrap:wrapper ではなく overflow-y:auto に戻り、必要に応じて内部コンテナが垂直にスクロールできるようにします。見た目は良くありませんが、少なくとも使いやすさをあまり損なわないアプローチです。
P粉2210464252023-10-18 18:31:39
パーティーに遅刻しましたが、何年も経った今でもこの問題が解決していません。最終的にグリッドを使用した解決策を見つけました。コンテナでは
を使用できます リーリーFlexbox の問題とグリッド修正を切り替えるための CodePen の例があります: https://codepen .io/MandeeD/pen/JVLdLd
P粉0119126402023-10-18 09:45:49
＃＃＃質問＃＃＃
列指向のフレックス コンテナーは、追加の列を収容するために拡張されません。 (これは
flex-direction: row では問題になりません。)
この質問は何度も尋ねられていますが (以下のリストを参照)、CSS には明確な答えがありません。
この問題はすべての主要なブラウザで発生するため、これをバグとして特定することは困難です。しかし、次のような疑問が生じます:
そのうち少なくとも 1 人は正解すると思うでしょう。その理由については推測することしかできません。おそらく、これは技術的に難しい実装だったので、このイテレーションでは棚上げされました。
更新:この問題は Edge v16 で解決されたようです。
問題の説明