当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"); } }