当文字超出容器宽度时，以省略号显示，这一需求在项目中十分常见，但是在flex布局下，可能会遇到问题，如省略号不显示，内容超出容器等问题，本文通过demo测试案例，记录下问题及解决方案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrapper {
200px;
display: flex;
}
.div1, .div2 {
flex: 1;/*占比，最小宽度*/
border: 1px solid blue;
}
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
<div class="div2">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
</body>
</html>
如上代码所示，我们发现，文字内容并没有被限制在flex容器里面，以省略号显示，经过调试发现，flex水平布局的容器，flex的值表示的是宽度占比，同时，类似于设置了一个最小宽度min-width。（此时，当给容器的宽设置了一个小于占比 * 总宽的width值，是起不到作用的，但是设置了一个大于占比 * 总宽的width值时，宽度有效，并撑开外部容器。如果不设置宽度值，则当内容大于占比时，容器仍由内容撑开）。
有了以上实践理解之后，得到解决方案如下两种：
- 为内容的父级容器（本例中是.div1, .div2）设置overflow: hidden;
- 为内容的父级容器（本例中是.div1, .div2）设置一个小于占比的宽度，如 0;
补充于2019年8月6日
之前的表述有点绕，现在理解下来，实质就是：设置flex的值，等同于设置了一个min-width，而min-width什么时候能看到起作用呢，就是在内容很少的时候，内容少时，该容器的宽以min-width为准，内容多时，该容器的宽就是内容的宽。max-width与width的关系是同样道理的，height也是一样的