flex:auto元素内容超出显示省略号设置无效 解决方案

举个例子：content元素的 width 为 200px（即下图 黄色背景），中间有两层div，分别是 aaa 和 bbb，都是flex布局，且不设置width，最里面一层有个 p 元素。要求：

• p 元素的 宽度 根据 内容的长度 自适应；
• 但如果 p 元素内容超过父元素可容纳的宽度，则显示为省略号；

问题：从上图可以看出，内容已经超出父元素可容纳的宽度，虽然设置了省略号的css样式，但并没有生效。

解决方案：p元素加多一个 width: 0 即可。如下图：

 注意：width的值可以随便设置，只要不是百分比类的单位( 如vw，% )就可以。如下图：

 问题分析：

1.内容超出不会变成省略号，其实是因为 width 和 省略号样式 是配套使用的。一般block元素的width默认都是100%，所以不设置width（只设置省略号的样式）就可以生效。而这里是flex布局，p 元素已经不是默认的block元素了，所以需要设置width。

2.为什么随便设置一个width值都可以生效？因为这里的p元素宽度需要自适应，所以设置了 flex: auto，这时的 p元素 宽度相当于是 auto，那么width设置什么值都会被忽略（除了百分比类的值，如40%，40vw），仅仅是配合省略号的样式生效而已。

flex知识点： 

flex: a b c; （flex: auto; 是 flex: 1 1 auto 的简写，flex: 1 1 auto 又可以分解写为 flex-grow: 1，flex-shrink: 1，flex-basis: auto）

a 的取值一般是1 或 0（是 或 否），表示当父元素有剩余空间时，该元素是否放大到刚好占满父元素的剩余空间。1 则自动放大，占满父元素的剩余空间，忽略 c 值；0 则不放大，宽度根据 c 的值走，如下图（黄色div认为是父元素）：

 b 的取值一般是1 或 0（是 或 否），表示当空间不足时，该元素是否缩小到刚好占满父元素的剩余空间。1则自动缩小，保持始终不超出父元素的宽度，忽略 c 值；0则不缩小，宽度根据 c 的值走，可能超出父元素的宽度，如下图（黄色div认为是父元素）：

 c 表示设置该元素在本行的宽度，类似width。