如何防止弹性项目缩小小于其内容？

Question

我已经设置了一个jsfiddle来证明这里的问题：
http://jsfiddle.net/x0eo3aeo/2/

HTML：

<div class="flexContainer">
    <div class="flexCol1">aaa</div>
    <div class="flexCol2"><div style="width:100px; background-color:yellow;">bbb</div></div>
    <div class="flexCol3"><div style="width:250px; background-color:pink;">Hello world, some long text here to make this element stay at 250px while splitting onto multiple lines.</div></div>
</div>

CSS：

.flexContainer {
    display: flex;
    width: 100%;
    flex-direction: row;
}
.flexCol1, .flexCol3 {
    flex: 1;
    background-color: green;
}

Firefox实际上就是我想要的。 第1列和第3列均匀弯曲， 直到第3列的宽​​度达到其子div的固定大小，然后仅弯曲第1列。 但是，在Chrome中，两列都继续平均弯曲，第3列的子内容溢出。

有没有办法以跨浏览器的方式实现Firefox风格的行为？

Answer 1

您应该能够通过添加min-width: -webkit-min-content;来实现Chrome中的Firefox行为min-width: -webkit-min-content; 到.flexCol3 。 这可以防止它缩小到其最小内容宽度以下。 （这是默认情况下应该发生的，因为min-width:auto在flexbox规范中min-width:auto引入，但尚未在Chrome中实现 。）

正如下面的评论中所指出的，IE似乎没有实现min-content width关键字，因此你可能不得不做一些比较粗糙的事情（比如min-width: 250px ）。 幸运的是，IE的下一个版本（12？）确实有min-width:auto实现，所以这应该像Firefox一样工作，我被告知。