如何防止彈性項目縮小小於其內容？

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一樣工作，我被告知。