IE10 中的 Flex-shrink答案

【问题标题】：Flex-shrink in IE10IE10 中的 Flex-shrink
【发布时间】：2016-11-02 10:49:21
【问题描述】：

我有一个块，其中有一个图像和另一个块。

父块有display:flex，使图片和子块站成一排。

子块也有display:flex，但它形成了一个由段落和标题组成的列。

.summary__testimonial{
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 120px;
    padding-top: 35px;
    max-width: 100%;
}

.summary__testimonial-right{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction:column;
    flex-direction:column;
    box-sizing: border-box;
    max-width: 100%;
    -ms-flex-negative:1;
    flex-shrink:1;
    -ms-flex-pack:center;
    justify-content:center;
    width: auto;
}

问题是文本段落在IE 10中溢出了他的父母。

我尝试设置max-width:100%、width:auto、box-sizing:border-box，将flex-shrink 的值更改为1 和0。

如果你在 IE 10 中打开它，它仍然会溢出，或者变成一行，你很可能在 codepen 中看到它。

有什么方法可以让它在 IE 10 中看起来和在普通浏览器中一样？

【问题讨论】：

标签： html css flexbox internet-explorer-10

【解决方案1】：

flex-shrink 的 IE10 等效项是 -ms-flex-negative

例如，

-ms-flex-negative: 0;

【讨论】：

【解决方案2】：

Internet Explorer 10 是使用 older version of flexbox (2012) 构建的。

此版本不提供flex-shrink。该物业当时并不存在。

请参阅Flexbox IE10 Property Index。

您可以获得的最接近的是-ms-flex 属性，它设置“负灵活性”(reference)。

另请参阅此答案：https://stackoverflow.com/a/35137869/3597276

【讨论】：

那么这个“-ms-flex-negative:1”是什么？是autoprefixer设置的，没用吗？
我从未听说过。更重要的是，它不在 MS Flexbox / IE10 指南中：msdn.microsoft.com/library/hh673531(v=vs.85).aspx
好的，但是如何理解这一点：“如果你必须支持 IE 10，最好的解决方案是始终为所有 flex 项目设置显式的 flex-shrink 值，或者始终使用速记形式”。当 IE10 没有任何 flex-shrink 值时，他们说“显式 flex-shrink 值”是什么意思？github.com/philipwalton/flexbugs
使用 flex / -ms-flex 速记。在我的回答中，附有链接参考。
好吧，我发现如果你设置 flex-shrink:1（使用这个“-ms-flex-negative”前缀使其在 ie10 中工作）然后将 width:100% 设置为 . summary__testimonial-right，它似乎按预期工作。