css之flex布局文字過長省略寬度被撐開

之前寫flex的時候，遇到過這樣一個問題，代碼如下

 

.flex{
　　display: flex;
}

.left{
　　flex:1 1 auto;
　　background: red;

}
.left p{
　　width: 100%;
　　text-overflow:ellipsis;
　　overflow:hidden;
　　white-space:nowrap;
}
.right{
　　background:green;
　　width: 200px;
}

<div class="flex">
    <div class="left">
        <p>我在左邊，自適應布局我在左邊，自適應布局我在左邊，自適應布局我在左邊，自適應布局</p>
        </div>
    <div class="right">我在右邊，定寬</div>
</div>    

然而展示確實右邊被擠壓了，如圖

 

郁悶吧。不知道什么原因。也搜了很多，發現都很不靠譜，最后找到個靠譜的，就是在left上加個width:0，然而加完0發現內容沒了，這時候再內容元素css加width:100%，發現又出現了！！！

其實還有一種是定寬可以設置為flex:0 0 xxpx;但另一部分一定要加overflow:hidden。

就這樣吧。源碼地址如下，可以對比一下：傳送門在下面

傳            送             門