相关疑难解决方法(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模式.

然而,官方规范 …

使用css时flexbox,三个主要浏览器在某些区域的行为似乎完全不同.

在这种情况下,我试图创建一个图像网格:

<div class="container">
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
</div>


.container {
    display:inline-flex;
    flex-flow : column wrap;
    align-content : flex-start;
    height : 100%;
}

在这个例子中,我需要一个容器,它本身包含几个div元素,设置为从顶部到底部流动,并在它们到达底部时包裹.最终为我提供了一系列照片.

但是,我需要容器水平扩展以容纳包装元素:

这是一个快速的jsFiddle来演示.

行为如下:

• IE 11 - 正确,容器水平拉伸以包裹每列包裹的元素
• Firefox - 容器只包装第一列元素,其余元素溢出.
• Chrome - 容器总是伸展以填充其父级的宽度,无论可能是什么.

在这个例子中,我想在其他两个浏览器中实现IE11的行为.因此我的问题是,如何使flexbox容器水平扩展以匹配其column wrap内容.

提前致谢.

这是我的代码

.containerSlave {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    height: 220px;
    /*item height x 10*/
    border: 2px solid red;
}

.containerSlave .ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 1px #000;
    font-size: 15px;
    color: #ffffff;
    margin: 2px 2px 2px 2px;
    background: radial-gradient(circle at 20px 15px, #7FBBFC, #000);
}

当球处于有限高度状态并自动移动其纵向时,如何使球在框架内被覆盖.随着球的数量增加,框架将增加其宽度.