如何显示：flex容器随包装内容水平扩展？

问题描述

当使用css flexbox 时，三个主要浏览器在某些区域显示的行为完全不同。

When using css flexbox the three main browsers appear to behave entirely differently in certain areas.

case我试图创建一个网格的图像：

In this case I am trying to create a grid of images:

<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 元素设置为从上到下流动，当它们到达底部时包装。

In this example I need a container, itself containing several div elements set up to flow from top to bottom and wrapping when they reach the bottom. Ultimately providing me with columns of photos.

但是我需要容器水平扩展以适应包装的元素：

However I need the container to expand horizontally to accommodate the wrapped elements:

以下是一个快速的演示。

Here is a quick jsFiddle to demonstrate.

行为如下：

• IE 11 - 正确的是，容器水平伸展， / li>
  
• Firefox - 容器只包装第一列元素，其余部分溢出。


• - 容器总是伸展以填充其父项的宽度。

• IE 11 - Correct, the container stretches horizontally to wrap each column of wrapped elements
• Firefox - The container only wraps the first column of elements, with the rest overflow out.
• Chrome - The container always stretches to fill the width of its parent, whatever that may be.

喜欢在其他两个浏览器中实现IE11的行为。因此我的问题是，如何使 flexbox 容器水平扩展以匹配其列wrap 内容。

In this instance I would like to achieve the behaviour of IE11 in the other two browsers. Therefore my question is, how can I make a flexbox container expand horizontally to match its column wrap contents.

提前感谢。

推荐答案

看来这个问题无法解决CSS，所以我建议你一个JQuery解决方案

It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution

container width =最后一个孩子的位置+容器的位置+最后一个孩子的宽度（包括边距）

container width = position of the last child - position of the container + width of the last child (including margin)

代码：

$(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);
    })
});

演示：

这篇关于如何显示：flex容器随包装内容水平扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！