在flex:1;的布局，文本超出显示省略号失效

在flex布局的时候，里面需要自动撑出宽度，超出之后要显示省略号，结果全部显示并且拉长页面

1585044641(1).jpg

如代码list使用display:flex;而li-center是flex:1;的时候，
li-name想要超出显示省略号，失效

    <div class="list">
        <img
            :src="imgsrc"
            alt=""
        >
        <div class="li-center">
            <p class="li-name">Ann ElliottAnn ElliottAnn ElliottAnn Elliott</p>
            <p class="li-time">01:28</p>
        </div>
        <div class="li-right">
            123
        </div>
    </div>

这个时候在li-center，加上overflow: hidden;就会达到想要的效果