CSS-对齐框中的多行最小最大元素在IE11中不起作用

我有一个holder元素，包含多个项目，每个项目的宽度不同

我希望每个元素都延伸到与其他元素相等的宽度，具有最小和最大宽度，然后根据需要进行包装

理论上，这应该可以使用CSS Flexbox实现。因此，我尝试使用以下HTML：

<div class="holder">
    <div class="element">A little text</div>
    <div class="element">Quite a lot more text than the other elements</div>
    <div class="element">A little bit more text</div>
</div>

其他浏览器运行这个没有任何问题。但在IE11中，当容器元素的宽度大于最大宽度+左右边距之和时，它似乎完全错误地计算了flexboxage

这是我的意思的一个演示-在IE11中尝试并拉伸/收缩容器：

---

我不确定这是一个bug还是我做错了什么，但我已经尽力让它正常运行。

事实上：-IE 11确实支持内容正当化，并且我发现如果我不使用flex:1；-这根本不符合我的要求！我看到了同样的行为，这已经让我发疯两天了。最令人沮丧的是tweener语法实际上可以在IE10中使用，但新语法不能在IE11中使用。我认为这部分与IE中的FlexBasis设置为0而不是auto有关。例如，如果使用flex属性将其设置为1 0 auto，则行为会发生变化。然而，它仍然不符合它应该是什么。

.holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.element {
    display: block;
    background-color: #555;
    height: 100px;
    flex: 1;
    margin: 5px;
    min-width: 50px;
    max-width: 150px;
}