html - IE10 中的 Flex 收缩

Question

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

父 block 有display:flex，使图像和子 block 排成一行。

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

http://codepen.io/anon/pen/qNmYRq

.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 中溢出了他的 parent 。

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

如果您在 IE 10 中打开它，它仍然会溢出或变成单行，这是您最有可能在 codepen 中看到的内容。

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

Answer 1

在 IE10 中，flex-shrink 的等效项是 -ms-flex-negative

例如，

-ms-flex-negative: 0;