如何解决当 flexbox 项目以列模式换行时，容器不会增加其宽度
问题
这看起来像是 flex 布局的一个根本缺陷。
列方向的 flex 容器不会扩展以容纳额外的列。（这不是问题flex-direction: row。）
这个问题已经被问过很多次了（见下面的列表），在 CSS 中没有明确的答案。
很难将其视为错误，因为该问题发生在所有主要浏览器中。但它确实提出了一个问题：
怎么可能所有主流浏览器都让 flex 容器在行方向上展开而不是在列方向上展开？
你会认为其中至少有一个会做对。我只能推测原因。也许这是一个技术上难以实现的实现，并且在这次迭代中被搁置了。
该问题似乎在 Edge v16 中得到解决。
问题说明
OP 创建了一个有用的演示来说明该问题。我在这里复制它：http://jsfiddle.net/nwccdwLw/1/
解决方法选项
来自社区的解决方案：
解决方法
我正在研究一个嵌套的 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:
wrap让内部容器在需要时垂直滚动。它并不漂亮，但它是一种至少不会过多破坏可用性的前进方式。