我正在開發一個嵌套的 Flexbox 佈局，其工作原理如下：

最外層（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... */ }

我的問題是，當視窗的高度太小時，內部列表不會換行。我嘗試了很多篡改所有 Flex 屬性的方法，嘗試嚴格遵循 CSS-Tricks 的指南，但沒有成功。

這個 JSFiddle 顯示了我到目前為止所擁有的內容。

預期結果（我想要的）：

實際結果（我得到的）：

較舊的結果（我在 2015 年得到的結果）：

更新

經過一番調查，這開始看起來像是一個更大的問題。所有主流瀏覽器的行為方式都相同，這與我嵌套的 Flexbox 設計無關。即使更簡單的 Flexbox 列佈局也不會在項目換行時增加清單的寬度。

另一個 JSFiddle 清楚地示範了這個問題。在目前版本的Chrome、Firefox 和IE11 中，所有項目都能正確換行；在row模式下列表的高度會增加，但在column模式下其寬度不會增加。另外，當更改column模式的高度時，根本不會立即回流元素，但在row模式下會發生。

但是，官方規範（具體看範例5）似乎顯示我想做的事情應該是可能的。

有人能想出解決這個問題的方法嗎？

更新2

經過大量嘗試使用 JavaScript 在調整大小事件期間更新各種元素的高度和寬度後，我得出的結論是，嘗試以這種方式解決它太複雜且太麻煩。另外，添加 JavaScript 肯定會破壞 Flexbox 模型，該模型應該盡可能保持乾淨。

現在，我回到overflow-y: auto而不是flex-wrap:wrapper，以便內部容器在需要時垂直捲動。它並不漂亮，但它是一種至少不會過度破壞可用性的方法。