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

我正在制作一个嵌套的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... */
}

我的问题是，当窗口的高度变得太小时，内部列表不会换行.我try 过很多次篡改flex的所有属性，试图在CSS-Tricks秒时一丝不苟地遵循指导原则，但没有成功.

这JSFiddle个显示了我到目前为止所拥有的.

Expected result (what I want):

Actual result (what I get):

Older result (what I got in 2015):

使现代化

经过一些调查，这似乎开始成为一个更大的问题.All major browsers behave the same way，这与我的flexbox设计嵌套无关.即使是更简单的flexbox列布局，在项目换行时也拒绝增加列表的宽度.

这other JSFiddle个例子清楚地说明了这个问题.在Chrome、Firefox和IE11的当前版本中，所有项目都正确包装；列表的高度在row模式下增加，但其宽度在column模式下不会增加.此外，当改变column模式的高度时，元件根本没有立即回流，但在row模式下有回流.

然而，official specs (look specifically at example 5)似乎表明我想做的应该是可能的.

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

使现代化 2

在try 了大量使用JavaScript在调整大小事件期间更新各种元素的高度和宽度之后，我得出的结论是，try 以这种方式解决问题太复杂、太麻烦了.此外，添加JavaScript肯定会 destruct Flexbox模型，该模型应该尽可能保持干净.

现在，我将返回到overflow-y: auto而不是flex-wrap: wrap，以便在需要时内部容器垂直滚动.这并不漂亮，但这是一种前进的方式，至少不会太多地 destruct 可用性.