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

发布时间：2020-12-14 18:31:18 所属栏目：资源来源：网络整理

导读：我已经设置了一个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"di

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

解决方法

您应该能够通过添加min-width来实现Chrome中的Firefox行为：-webkit-min-content;到.flexCol3.这可以防止它缩小到其最小内容宽度以下. (这是默认情况下应该发生的,因为min-width：在flexbox规范中引入了auto,但是还有 hasn’t been implemented in Chrome.)

如下面的评论中所述,IE似乎没有实现min-content width关键字,因此您可能必须在那里做一些更黑的事情(如min-width：250px).幸运的是,IE的下一个版本(12？)确实有min-width：auto实现,所以这应该像Firefox一样工作,我被告知.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!