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' 数量的 "box" class 适合并使 "content" class 更宽"box" class 已放置。

在 Internet Explorer(11) 中，您会看到 "box" class 适合 "content" class 并扩展它，但在 Chrome( 41) "box" classes 似乎漂浮在 "content" class 上方和 "content" class 宽度之外。这很烦人，因为如果我想在它旁边放置另一个 "content" class，它会与第一个重叠。

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

已解决：

Answer 1

首先，我建议您不要将 float: left; 与 display: flex; 混用。考虑改为指定 display: inline-flex;。

也就是说，恐怕你必须做一点计算，才能找到容器元素内所有 children 的最大偏移权（包括边距）:

以下代码需要 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 不一定是右偏移量最大的那个。如果 children 具有任意宽度，那也可能会在不重新排序元素的情况下失败。例如，如果同一列中最后一个之前的 child 比最后一个大。

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

Flexbox works in Internet explorer but does not in Chrome

html

css

google-chrome

internet-explorer

flexbox