Ellipsis inside flex

by amosnesher

HTML

<br />

<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 corrupt)</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

CSS

.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;
}