问当flexbox项以列模式换行时，容器不会增加宽度

EN

我正在做一个嵌套的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显示了我到目前为止所拥有的内容。

预期结果(我想要的)

​

​

实际结果(我得到了什么)

​

​

较旧的result (我在2015年得到的)

​

​

更新

经过一些调查，这开始看起来是一个更大的问题。所有主要浏览器的行为方式都与相同，这与我的flexbox设计嵌套无关。当项目换行时，即使是更简单的flexbox列布局也不会增加列表的宽度。

这个other JSFiddle清楚地说明了这个问题。在当前版本的Chrome、火狐和IE11中，所有项目都可以正确换行；在row模式下，列表的高度会增加，但在column模式下，列表的宽度不会增加。此外，当更改column模式的高度时，根本不会立即回流元素，但在row模式中会有。

然而，official specs 似乎表明我想要做的事情应该是可能的。

有人能想出解决这个问题的办法吗？

更新2

在使用JavaScript在调整大小事件期间更新各种元素的高度和宽度的大量实验之后，我得出的结论是，尝试以这种方式解决它太复杂和太麻烦。此外，添加JavaScript肯定会破坏flexbox模型，它应该尽可能保持干净。

现在，我使用overflow-y: auto而不是flex-wrap: wrap，这样内部容器就可以在需要的时候垂直滚动。它并不美观，但它是一种前进的方式，至少不会过多地破坏可用性。