當文字超出容器寬度時，以省略號顯示，這一需求在項目中十分常見，但是在flex布局下，可能會遇到問題，如省略號不顯示，內容超出容器等問題，本文通過demo測試案例，記錄下問題及解決方案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrapper {
width: 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）設置一個小於占比的寬度，如width: 0;
補充於2019年8月6日
之前的表述有點繞，現在理解下來，實質就是：設置flex的值，等同於設置了一個min-width，而min-width什么時候能看到起作用呢，就是在內容很少的時候，內容少時，該容器的寬以min-width為准，內容多時，該容器的寬就是內容的寬。max-width與width的關系是同樣道理的，height也是一樣的