私は次のように動作するネストされた 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 に戻り、必要に応じて内部コンテナが垂直にスクロールできるようにします。見た目は良くありませんが、少なくとも使いやすさをあまり損なわないアプローチです。