Css float 当flex容器位于浮动元素内时，如何使IE 11包装flexbox项目？

我正在尝试向两列布局的内容区域添加flexbox元素。布局具有固定宽度的侧栏和流体内容。它使用

float:left

和负边距来实现这一点

目标是flex容器的宽度为父容器的100%。弹性项目应按行显示，多余的项目将换行到下一行

直截了当的方法在Firefox和Chrome中运行良好：

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.flex-item {
    flex: 1 0 100px;
    padding: 10px;
    border: 1px solid gray;
}

...

<div class="flex-container">
   <div class="flex-item">Item</div>
   <!-- more items here -->
   <div class="flex-item">Item</div>
</div>

.flex容器{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：拉伸；
}
.弹性项目{
flex:10100px；
填充：10px；
边框：1px纯色灰色；
}
...
项目
项目

完整示例（适用于FF和Chrome，但不适用于IE 11）：

问题

在Internet Explorer 11中，所有项目都显示在一行上。即使物品很多，它们也不会换行到下一行。这会导致页面变得比浏览器窗口宽得多

经过大量实验，这似乎与flex容器位于

float:left

元素中的事实有关。移除

浮动

允许项目正确包装，但会破坏布局的其他部分。除flexbox外，内容区域还可以包含其他内容，其中一些内容需要使用

float:left

和

clear:both

。如果没有浮动的父元素，

clear:both

将把所有内容都推到侧边栏下面。为

.flex容器提供一个固定的宽度也可以解决这个问题，但在这种情况下，我们希望它是100%宽度

Firefox屏幕截图：


IE 11截图：


问题

当flexbox容器的父容器具有“float:left”时，是否有方法使flex项目包装到IE 11中的下一行

免责声明：请暂时忽略以下事实：此布局同时使用浮动和flexbox，而不是仅使用其中一个。在这种情况下，flexbox对于页面的一部分来说是一个很好的增强功能，而总体布局必须更加健壮。
这里的根本问题实际上与收缩以适应上下文中容器的自动测量有关。通过使
.content
的最小宽度为100%，您将最大宽度留给了自动，因此浏览器需要测量内容，以了解其最大宽度，以便在其周围缩小

在IE中，如果没有设置任何限制，则将完成完整的布局以获得准确的结果（在这里的情况下，我们实际上有无限的空间，因为我们可以滚动，并且您限制了其祖先树中任何位置的宽度）。Webkit和Gecko在过去做了一些更改，以避免实际进行布局和近似计算，尽管实际测量结果不正确，因为他们不知道其他容器有多大（收缩到适合的容器），他们认为性能优势值得权衡。Gecko、Webkit和Blink（由于Webkit的分叉）都使用相同的行为，我们在Microsoft Edge中更改了实现以匹配这一行为，因此我们呈现的与Firefox、Chrome和Safari相同。要在IE11中获得相同的结果，您需要在收缩以适应上下文（浮动、ABPOS、表格单元格等）时提供最大宽度约束

最终，我更喜欢IE行为，因为它实际上是有意义的，并且是一致的。如果有足够的空间来布置内容，则布局不应改变（这里就是这种情况）。这是一个演示为什么这种近似会导致问题的例子，视口中仍然有足够的空间在每种情况下渲染相同的结果，但因为它们无法确定浮动块的实际尺寸，所以在Chrome/Firefox/Safari/Edge中会得到不同的结果；在IE中，它们产生相同的一致结果

很抱歉回复太长，但我想提供IE在这里似乎不正确的背景

如果您需要进一步的澄清，请告诉我