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}

Answer 1

是我理解有问题吗？并没有飞呀？

http://jsrun.net/UqZKp

Answer 2

用flex-shrink：0 让右侧不缩小

<style>
    #box {
        display: flex;
    }
    #box p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #box div {
        flex-shrink: 0;
        width: 100px;
        height: 300px;
        background-color: #e4b9b9;
    }
</style>
<div id="box">
    <p>内容内容内容内容内容内容内容内容内容内容内容内容</p>
    <div></div>
</div>