Flexbox 在 Internet Explorer 中有效，但在 Chrome 中无效

Question

我想要达到的目标：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) 中，您会看到“box”类适合“content”类并对其进行扩展，但在 Chrome(41) 中，“box”类似乎漂浮在“content”类上方和外部“内容”类宽度。这很烦人，因为如果我想在它旁边放置另一个“内容”类，它将与第一个重叠。

谁能解释我做错了什么？如果这是 Chrome 故障，有什么建议可以在没有 flexbox 的情况下完成此操作？

已解决：Check other topic for multiple containers!

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);

见fiddle

注意：您可能会想到一种查找最后一个孩子的右偏移量的算法。这在大多数情况下都有效，但也可能会失败，因为您可以在弹性项目上设置属性 order 以重新排序它们。因此，DOM 中的最后一个孩子不一定是具有最大右偏移量的那个。如果子项具有任意宽度，那么在不重新排序元素的情况下也可能会失败。例如，如果同一列中最后一个子级大于最后一个。