我正在处理嵌套的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列布局也拒绝增加列表的宽度。
此other JSFiddle清楚地说明了问题。在当前版本的Chrome，Firefox和IE11中，所有项目均正确包装；列表的高度在
row模式下增加，但其宽度在column模式下不增加。此外，更改column模式的高度时，根本没有元素的立即重排，但是在row模式中。但是，official specs (look specifically at example 5)似乎表明我想做的事应该可行。
有人可以提出解决此问题的方法吗？
更新2
经过大量使用JavaScript在调整大小事件期间更新各种元素的高度和宽度的实验之后，我得出的结论是，它太复杂且难以以这种方式解决。此外，添加JavaScript肯定会破坏flexbox模型，该模型应保持尽可能干净。
现在，我回到
overflow-y: auto而不是flex-wrap: wrap，以便内部容器在需要时垂直滚动。它不是很漂亮，但是至少不会过多破坏可用性是一种前进的方式。 最佳答案
问题
这似乎是挠性布局的根本缺陷。
沿列方向的flex容器将不会扩展以容纳其他列。 （这不是flex-direction: row中的问题。）
这个问题已经被问过很多次了（请参见下面的列表），CSS中没有明确的答案。
很难将其固定为错误，因为该问题发生在所有主要浏览器上。但这确实提出了一个问题：
所有主要浏览器如何可能将flex容器
在行方向而不是列方向扩展包装？
您可能会认为至少其中之一会做对。我只能推测原因。也许这在技术上很难实现，但在此迭代中被搁置了。
更新：该问题似乎在Edge v16中已解决。
问题说明
OP创建了一个有用的演示来说明问题。我在这里复制它：http://jsfiddle.net/nwccdwLw/1/
解决方法选项
来自Stack Overflow社区的Hacky解决方案：
"It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution."
"It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good. Therefore, you can use a row flex container with a vertical writing mode."
更多分析
Chromium Bug Report
Mark Amery's answer
描述相同问题的其他帖子
Flex box container width doesn't grow
How can I make a display:flex container expand horizontally with its wrapped contents?
Flex-flow: column wrap. How to set container's width equal to content?
Flexbox flex-flow column wrap bugs in chrome?
How do I use "flex-flow: column wrap"?
Flex container doesn't expand when contents wrap in a column
flex-flow: column wrap, in a flex box causing overflow of parent container
Html flexbox container does not expand over wrapped children
Flexbox container and overflowing flex children?
How can I make a flexbox container that stretches to fit wrapped items?
Flex container calculating one column, when there are multiple columns
Make container full width with flex
Flexbox container resize possible?
Flex-Wrap Inside Flex-Grow
Flexbox grow to contain
Expand flexbox element to its contents?
flexbox column stretch to fit content
https://stackoverflow.com/q/48406237/3597276
flex-flow: column wrap doesn't stretch the parent element's width
Why doesn't my <ul> expand width to cover all the <li>?
How to have width adjust when flexbox columns wrap?
Flexbox wrap not increasing the width of parent?
关于html - 当flexbox元素以列模式包装时，容器的宽度不会增加，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46942233/