flex佈局被子元素撐開，如何保持內容不超出容器

移動端裏面，flex 佈局很好用，它可以根據設備寬度來自動調整容器的寬度，可是最近在作項目的時候發現一個問題：

一個li裏面設置了flex,flex: 0 0 33.333%,而後想讓子元素裏面的文字超出flex定義寬度後自動省略。

<li>
    <a href="">
        <img src="https://img30.360buyimg.com/focus/s140x140_jfs/t13411/188/926813276/3945/a4f47292/5a1692eeN105a64b4.png" alt=""> 
        <p>小米小米小米小米小米小米小米小米小米小米小米小米</p>
    </a>
</li>

ul{
     display: flex;
}
li{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    text-align: center;
    padding: 0 1.333vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 2.667vw;
}
li p{
    font-size: 3.2vw;
    color: #8F8E94;
    text-overflow: ellipsis;
    white-space: nowrap;
}

這時候會發現，p的文字可能會很是長，一些設備下須要隱藏顯示，即不換行，並留下省略符…做標記。
這裏會發現text-overflow: ellipsis不生效，省略符根本沒有出現。並且由於設置了 nowrap 會發現文字會將 content 撐開，致使內容超出了屏幕。因此必需要解決這個問題。

嘗試取消父元素.li的flex: 0 0 33.33%，無效。
嘗試取消ul容器的display: flex，省略號出現。

所以猜想是flex佈局的問題，進一步猜想省略符須要對父元素限定寬度。
嘗試對父元素li設置width: 100%無效，可是設置width: 0可行。即：

li{
    flex: 0 0 33.333%;
    width: 0
}

若是不設置寬度，li能夠被子節點無限撐開；所以p總有足夠的寬度在一行內顯示全部文本，也就不能觸發截斷省略的效果。測試還有一種方法能夠達到效果：

li{
    flex: 0 0 33.333%;
    overflow: hidden;
}

上面的二種方法均可以達到咱們須要的效果，即給 li 設置了 flex 的值 的時候，它會動態的得到父容器的剩餘寬度，且不會被本身的子元素把內容撐開。

給html, body設置max-width，元素彷佛能強行撐開頁寬； 給body設置overflow，頁寬不能被撐開了，但元素寬度還在，即元素自己仍是溢出； 給html, body同時設置max-width和overflow，頁寬限定在max-width內，元素自己仍是溢出； 給.main容器設置overflow: hidden，同理.main是不溢出了，.notice自己仍是溢出； 給.notice元素設置width或max-width，雖然寬度受限，但在特定寬度下省略符…顯示不全，有時只顯示兩個點..