IE 10 flex box and text truncate - html

Question

.wrapper {
background: tomato;
width: 100px;
display: flex;
}
.left {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.right {
}
<div class=wrapper>
<div class="left">
title title title title
</div>
<div class="right">
123
</div>
</div>
I have a DIV (wrapper) with 2 DIVs inside: left and right.
wrapper's width is known. I want to truncate text in left DIV if it doesn't fit. Text in right should be always visible. I tried several techniques here, but the only one is working is based on flex box. Unfortunately it doesn't work on IE10. I used -ms- prefixes, without success.
Is there any way to make it work on IE10?

Answer 1

I can't test this on IE10 myself, though since its -ms-flex defaults to 0 0 auto, you will need to add -ms-flex: 0 1 auto to the left, so it is allowed to shrink.
And as the default on IE11 and the rest of the browsers is 0 1 auto, they work as is.
Fiddle demo
Stack snippet
.wrapper {
background: tomato;
width: 100px;
display: -ms-flexbox; /* IE10 */
display: flex;
}
.left {
-ms-flex: 0 1 auto; /* IE10 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.right {
}
<div class=wrapper>
<div class="left">
title title title title
</div>
<div class="right">
123
</div>
</div>

Answer 2

Here is an idea without the use of flexbox but using display:table:
.wrapper {
background: tomato;
width: 100px;
display: table;
}
.left {
display: table-cell;
position: relative;
width: 100%;
}
.left span {
position: absolute;
top:0;
left:0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.right {
display: table-cell;
}
<div class=wrapper>
<div class="left">
<span>
title title title title title title
</span>
</div>
<div class="right">
123
</div>
</div>