Flexbox在Internet Explorer中工作，但不在Chrome中 [英] Flexbox works in Internet explorer but does not in Chrome

问题描述

我想实现的： 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类放置时，使content类变宽。

在Internet Explorer（11）中，您看到box 类并扩展它，但在Chrome（41）中，框类似乎浮于内容类之外，并且在内容类宽度之外。这是令人讨厌的，因为如果我魔杖旁边放置另一个内容类，它将重叠第一个。

任何人都可以解释我做错了什么？如果这是一个铬故障任何建议，以完成这个没有flexbox？

解决：检查多个容器的其他主题首先我建议你不要混合 float：left; / code>与显示：flex; 。请考虑指定 display：inline-flex; 。



恐怕你必须做小计算，找到容器元素中所有子元素的最大偏移量（包括边距）：



以下代码段需要jQuery，并且应该运行当DOM准备好时：



  // ------------------ -------------------------------------------------- --------- 
 //找到所有孩子中相对于容器的最大偏移量
 // ---------------- -------------------------------------------------- ----------- 
 
 var maxOffsetRight = 0，
 currentOffsetRight; 
 $ b $（'＃container'）。children（）。each（function（）{
 currentOffsetRight = $（this）.position（）。left + $（this）.outerWidth true）; 
 if（currentOffsetRight> maxOffsetRight）{
 maxOffsetRight = currentOffsetRight; 
} 
}）; 
 
 //设置容器的宽度
 var offsetLeft = $（'＃container'）。position（）。left; 
 $（'＃container'）。css（'width'，maxOffsetRight  -  offsetLeft）; 
  

请参阅 order 来对它们进行重新排序。因此，DOM中的最后一个孩子并不一定是拥有最大权利抵消的孩子。如果孩子的宽度是任意的，那么如果不对元素进行重新排序，那也可能失败。例如，如果最后一个在同一列的孩子比最后一个孩子大。

What I would like to achieve: 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>

What I would like to have is that the 'X' amount of "box" classes fit in and make the "content" class wider when more "box" classes are placed.

In Internet Explorer(11) you see that the "box" class fit in the "content" class and expands it, but in Chrome(41) the "box" classes seem to float above the "content" class and outside the "content" class width. This is annoying because if I wand to place another "content" class next to it, it will overlap the first one.

Can anyone explain what i'm doing wrong? If it is a Chrome glitch any suggestions to accomplish this without flexbox?

Solved: Check other topic for multiple containers!

解决方案

First I'll suggest you to not mix float: left; with display: flex;. Consider specifying display: inline-flex; instead.

That said, I'm afraid you have to do a little computation, to find the biggest offset right (including margins) of all the children inside the container element :

The following piece of code requires jQuery, and is supposed to run when the DOM is ready :

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

See fiddle

Note: You might think of an algorithm that looks for the offset right of the last child. That would work in most cases, but that could fail as well as you can set a property order on the flex items, to reorder them. Therefore the last child in the DOM is not necessarily the one that has the biggest right offset. That could also fail without reordering elements, if the children have arbitrary width. For example if the child before the last, in the same column, is larger than the last.

这篇关于Flexbox在Internet Explorer中工作，但不在Chrome中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！