html - 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

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