举个例子：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。
