html – 如何进行显示：flex容器用包装的内容水平扩展？

当使用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容器水平扩展以匹配其列换行内容.

提前致谢.

解决方法

看来这个问题只能用CSS解决,所以我提出一个JQuery解决方案

容器宽度=最后一个孩子的位置 – 最后一个孩子的容器宽度的位置(包括边距)

代码：

$(document).ready(function() {
 $('.container').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});

演示：

http://jsfiddle.net/qzea320L/