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”類之上，而在“ content”之外班級寬度。 這很煩人，因為如果我要在其旁邊放置另一個“內容”類，它將與第一個類重疊。

誰能解釋我在做什么錯？ 如果是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);

見小提琴

注意：您可能會想到一種算法，該算法尋找最后一個子項的偏移量。 這在大多數情況下都可以使用，但是那樣可能會失敗，而且您可以在flex項目上設置屬性order以對其重新排序。 因此，DOM中的最后一個子不一定是右偏移最大的那個。 如果子級具有任意寬度，則在不重新排序元素的情況下也可能會失敗。 例如，如果同一列中最后一位之前的孩子大於最后一位。