Flexbox的作品在Internet Explorer中，但在Chrome中不(Flexbox w

我想实现： 的jsfiddle

<div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
    <div class="box">13</div>
</div>

我想有是，“框”类的“X”量融入其中，并且使“内容”类更宽当更多的“盒子”类放置。

在Internet Explorer（11）你看到“盒子”类适合在“内容”级，并将其扩展，但在Chrome（41）的“箱子”类似乎漂浮在“内容”类和“内容外“级宽度。 这是烦人，因为如果我的魔杖放在它旁边的另一个“内容”类，它就会重叠第一个。

任何人都可以解释我做错了什么？ 如果是Chrome的毛刺任何建议，做到这一点不Flexbox的？

解决 ： 检查其他题目的多个容器！

Answer 1:

首先，我会建议你不要混用float: left; 与display: flex; 。 考虑指定display: inline-flex; 代替。

这就是说，我怕你必须做一些计算，发现最大偏移权利（包括边距）的所有容器元素中的儿童：

下面这段代码需要jQuery和应该当DOM准备运行：

// -----------------------------------------------------------------------------
// Find the biggest offset right among all children, relatively to the container
// -----------------------------------------------------------------------------

var maxOffsetRight = 0,
    currentOffsetRight;

$('#container').children().each(function() {
   currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
    if (currentOffsetRight > maxOffsetRight) {
        maxOffsetRight = currentOffsetRight;
    }
});

// Set the width of the container
var offsetLeft = $('#container').position().left;
$('#container').css('width', maxOffsetRight - offsetLeft);

见小提琴

注意：您可能觉得一种算法，寻找最后一个孩子的抵消权。 这将在大多数情况下，但可能会失败，以及你可以设置一个属性order在柔性的项目，重新排序。 因此，在DOM的最后一个孩子并不一定具有最大的右偏移的一个。 这也可能失败，但不会重新排序的元素，如果孩子有任意宽度。 例如，如果孩子前的最后一次，在同一列，是一次比一次大。

文章来源: Flexbox works in Internet explorer but does not in Chrome