我正在开发一个嵌套的 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 ，以便内部容器在需要时垂直滚动。它并不漂亮，但它是一种至少不会过多破坏可用性的方法。