我有一个基于flexbox的布局。两列,一个固定尺寸,第二列需要占用剩余空间。在增长列中,我有一个字符串,我希望它被剪裁。
在Chrome中它运行正常。但它在Firefox和IE中不起作用。我试图通过使用相对和绝对位置给grow(flex item)内部元素一个宽度来修复它,但后来我得到了一个损坏的布局。腐败与元素的高度不考虑其所有子元素有关。
注意:flex grow项目中的内部元素是使用多个 div 标记构建的。
这是jsFiddle。
.cols {
display: flex;
}
.flex--0 {
flex: 0 0 auto;
}
.flex--1 {
flex: 1 1 auto;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.width--100 {
width: 100%;
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.border {
border: 1px solid gray;
}
<h1>Ellipsis inside Flex item</h1>
<h2>Working fine in Chrome Not working in FF and IE</h2>
<div class="cols border">
<div class="flex--0 border padding--sm">Icon</div>
<div class="flex--1 border padding--sm">
<div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div>
<div>Icon</div>
<div>Icon</div>
<div>Icon</div>
</div>
</div>
<div>Second BLOCK</div>
<h2>Trying to fix in FF and IE (Layout corrupts)</h2>
<div class="cols border">
<div class="flex--0 border padding--sm">Icon</div>
<div class="flex--1 relative border padding--sm">
<div class="absolute width--100">
<div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div>
<div>Icon</div>
<div>Icon</div>
<div>Icon</div>
</div>
</div>
</div>
<div>Second BLOCK</div>