当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... */ }
我的问题是，当窗口的高度变得太小时，内部列表不会换行。 我已经尝试了很多篡改所有的flex属性，试图按照CSS的技巧准则，但没有运气。
这JSFiddle显示了我到目前为止。
预期的结果 （我想要的） ：
我想要的输出http://atornblad.se/so/flexbox-wrapping.png
实际结果 （我得到） ：
我当前的输出http://atornblad.se/so/flexbox-not-wrapping.png
UPDATE
经过一番调查之后，这个问题开始变成一个更大的问题。 所有主stream浏览器的行为方式都是一样的 ，与我的flexboxdevise嵌套无关。 甚至更简单的Flexbox列布局拒绝增加项目换行时的列表宽度。
这个JSFiddle清楚地表明了这个问题。 在当前版本的Chrome，Firefox和IE11中，所有项目均正确包装; 列表的高度row模式下增加，但在row模式下其宽度不增加。 此外，当改变column模式的高度时，不存在元素的立即回stream，但是存在row模式。
然而， 官方规格（具体看例5）似乎表明，我想要做的事情应该是可能的。
有人能想出解决这个问题的办法吗？
更新2
经过大量的实验，使用JavaScript来更新resize事件中各种元素的高度和宽度，我得出这样的结论：试图以这种方式解决这个问题太复杂，太麻烦了。 另外，添加JavaScript绝对会破坏Flexbox模型，该模型应尽可能保持清洁。
现在，我回落到overflow-y: auto而不是flex-wrap: wrap以便内部容器在需要时垂直滚动。 这不是很好，但是至less不会太多破坏可用性是一个方向。
这看起来像是Flexbox布局的一个基本缺陷。 列方向的柔性容器不会扩展以容纳其他列。 （这在flex-direction: row不是问题flex-direction: row 。
这个问题已经被多次询问（见下面的列表），没有干净的Flex或一般的CSS答案。
很难将其视为错误，因为所有主stream浏览器都会出现问题。 但它确实提出了这样一个问题：
所有主stream浏览器如何获得flex容器在行方向而不是在列方向上进行展开？
你会认为他们中至less有一个会做对。 我只能推测原因。 也许这是一个技术上很难实现，并搁置这个迭代。
问题的例证
OP创build了一个演示该问题的有用演示。 我在这里复制它： http : //jsfiddle.net/nwccdwLw/1/
解决方法选项
来自Stack Overflow社区的Hacky解决scheme：
-
“看来这个问题不能用CSS解决，所以我build议你一个JQuery解决scheme。”
-
“很奇怪，大多数浏览器都没有正确地实现列flex容器，但是对写模式的支持是相当不错的，因此，你可以使用一个垂直写模式的行flex容器。
更多分析
-
铬错误报告
-
马克·阿梅里的回答
类似的问题
- Flex盒子容器宽度不会增长
- 我怎么能做一个显示：flex容器水平扩展其包装的内容？
- Flex-flow：列包装。 如何设置容器的宽度等于内容？
- Flexbox flex-flow列在chrome中包含错误？
- 我如何使用“flex-flow：列换行”？
- 内容包装在列中时，Flex容器不会展开
- flex-flow：列包装，导致父容器溢出的popup框
- Html Flexbox容器不会展开包装的子项目
- Flexbox容器和满溢的儿童？
- 我怎样才能使Flexbox容器延伸适应包装物品？
- Flex容器计算一列，当有多列时
- 用flex来制作容器的全宽
- Flexbox容器可能resize？
- Flex-Wrap内部Flex-Grow
- Flexbox成长为包含
- 将flexbox元素展开到其内容？
可能的JS解决scheme
var ul = $("ul.ul-to-fix"); if(ul.find("li").length>{max_possible_rows)){ if(!ul.hasClass("width-calculated")){ ul.width(ul.find("li").eq(0).width()*ul.css("columns")); ul.addClass("width-calculated"); } }
