相关疑难解决方法(0)

我正在研究嵌套的flexbox布局,它应该如下工作:

最外层(ul#main)是一个水平列表,当添加更多项时,它必须向右扩展.如果它变得太大,应该有一个水平滚动条.

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

此list(ul#main > li)的每个项目都有一个header(ul#main > li > h2)和一个内部列表(ul#main > li > ul.tasks).此内部列表是垂直的,应在需要时包装到列中.当包装到更多列时,其宽度应该增加,以便为更多项目腾出空间.此宽度增加也应适用于外部列表的包含项.

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

我的问题是当窗口的高度太小时内部列表不会换行.我已经尝试了很多篡改所有的flex属性,试图仔细遵循CSS-Tricks的指导,但没有运气.

这个JSFiddle显示了我到目前为止所拥有的内容.

预期结果 (我想要的):

实际结果 (我得到的):

较旧的结果 (我在2015年得到的):

UPDATE

经过一番调查,这开始看起来像一个更大的问题.所有主流浏览器的行为方式都相同,而且与我的嵌套Flexbox设计无关.更简单的flexbox列布局拒绝在项目换行时增加列表的宽度.

这其他的jsfiddle清楚地表明了问题.在当前版本的Chrome,Firefox和IE11中,所有项目都正确包装; 列表的高度在row模式中增加,但其宽度在column模式下不会增加.此外,在更改column模式的高度时,根本没有立即回流元素,但存在row模式.

然而,官方规范 …