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

时间:2015-01-19 16:52:48

标签: html flexbox

我已经设置了一个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风格的行为?

1 个答案:

答案 0 :(得分:15)

通过将min-width: -webkit-min-content;添加到.flexCol3,您应该能够在Chrome中实现Firefox行为。这可以防止它缩小到其最小内容宽度以下。 (由于flexbox规范中引入了min-width:auto,因此默认情况下应该会发生这种情况,但hasn't been implemented in Chrome尚未实现。)

如下面的评论中所述,IE似乎没有实现min-content宽度关键字,因此您可能需要在那里做一些比较粗俗的事情(如min-width: 250px)。幸运的是,IE的下一个版本(12?)确实已经实现min-width:auto,所以这应该像Firefox一样,我被告知。