我正在開發一個嵌套的 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 ，以便內部容器在需要時垂直捲動。它並不漂亮，但它是一種至少不會過度破壞可用性的方法。