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

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; 添加到 .flexCol3，您应该能够在 Chrome 中实现 Firefox 行为。这可以防止它缩小到其最小内容宽度以下。（由于 flexbox 规范中引入了 min-width:auto，这是默认情况下应该发生的情况，但是 hasn't been implemented in Chrome 还没有。）

如以下评论所述，IE 似乎没有实现 min-content width 关键字，因此您可能必须在那里做一些更 hackier 的事情（比如 min-width: 250px）。幸运的是，IE 的下一个版本（12？）确实实现了 min-width:auto，所以这应该像 Firefox 一样工作，有人告诉我。

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

How to prevent a flex item from shrinking smaller than its content?

html

flexbox