我正在研究一个嵌套的弹性盒布局，它应该按如下方式工作：
最外层（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 技巧很仔细，但没有运气。
This JSFiddle显示我到目前为止所拥有的。
预期结果 （我想要的是）:
实际结果 （我得到什么）:
较旧的结果 （我在2015年得到的）:
经过一番调查后，这开始看起来像是一个更大的问题。所有主流浏览器的行为方式都相同，这与我的弹性盒设计嵌套无关。即使更简单的 Flexbox 列布局也不会在项目换行时增加列表的宽度。
This 其他 JSFiddle清楚地表明了问题。在当前版本的 Chrome、Firefox 和 IE11 中，所有项目都能正确换行；列表的高度增加row模式，但其宽度不会增加column模式。此外，当改变元素的高度时，根本不会立即回流元素。column模式，但有row mode.
但是，那官方规格（具体看例子5）似乎表明我想做的事情应该是可能的。
有人可以想出解决这个问题的方法吗？
经过大量尝试使用 JavaScript 在调整大小事件期间更新各种元素的高度和宽度后，我得出的结论是，尝试以这种方式解决它太复杂且太麻烦。另外，添加 JavaScript 肯定会破坏 Flexbox 模型，该模型应该尽可能保持干净。
现在，我又回到了overflow-y: auto代替flex-wrap: wrap以便内部容器在需要时垂直滚动。它并不漂亮，但它是一种至少不会过多破坏可用性的方法。
这看起来像是弹性布局的一个根本缺陷。
列方向的弹性容器不会扩展以容纳额外的列。 （这不是问题flex-direction: row.)
这个问题已经被问过很多次了（见下面的列表），CSS 中没有明确的答案。
很难将其确定为错误，因为所有主要浏览器都会出现该问题。但这确实提出了一个问题：
怎么可能所有主流浏览器都支持flex容器呢？ 在行方向上展开换行但不在列方向上展开？
你会认为他们中至少有一个人会做对。我只能推测原因。也许这是一个技术上困难的实现，因此在这次迭代中被搁置。
UPDATE:该问题似乎已在 Edge v16 中得到解决。
OP 创建了一个有用的演示来说明问题。我把它复制在这里：http://jsfiddle.net/nwccdwLw/1/
来自 Stack Overflow 社区的 Hacky 解决方案：
“看来这个问题不能只用 CSS 来解决，所以我建议你使用 JQuery 解决方案。”
“奇怪的是，大多数浏览器都没有正确实现列伸缩容器，但对书写模式的支持相当好。因此，您可以使用具有垂直书写模式的行伸缩容器。”
铬错误报告
马克·埃默里的回答