flex布局与文字超出显示省略号问题

Question

如图，左边内容右边图片。右侧图片固定宽度不设高度，左边的宽度为总宽度-右侧图片占据的固定宽度超出文字显示省略号

我用flex进行布局样式大概如下，现在的问题是我怎么让左侧的文字超出省略,一下组合是不好用的，因为必须要制定宽度，如果我给左侧制定width:100%;那么会把整个li的宽度都占满才会省略。图片就会被挤飞

white-space: nowrap;

overflow:hidden;

text-overflow: ellipsis;

li {display:flex;overflow:hidden;width:100%}

.left{flex-grow:1};

.right{flex:6rem;height:auto}