这个时候需要在 flex:1; 后设置样式 min-width: 0 ; 保证内容不超出外层容器.
另外
父元素flex:1子元素height:100%或者width:100%失效的解决办法
通过设置父元素height:0; 同理 width 。这个方法还能解决 flex:1 超出省略号css失效。 这个方法safari浏览器目前还不兼容，但是chrome有效
/* 父元素 */
.parent{height:0;}
父元素 与 子元素 通过定位解决。
/* 父元素 */
.parent{position:relative;}
.child{position:absolute;top:0;right:0;bottom:0;left:0;}