這種情景怎么解釋？display:flex 遭遇 white-space: nowrap;

問題描述

html如下，使用了flex-box布局，左邊圖片的img-box定寬，右邊的css定義了flex-item，然后對shop-name進行了單行不換行截斷，這時候就發現左邊的圖片被擠扁了，小于定的寬度。發生這個情況在chrome上，ios和安卓的微信下正常.

chrome效果見圖：

<a href="#" class="coupons-item flex"> <div class="img-box"><img src="1.jpg" /></div> <div class="flex-item"><h3 class="shop-name">有家餐廳（京華城店）</h3><div class="text">滿100減20</div> </div></a>

(scss)

.coupons-item{ padding:1rem; color:#000; text-decoration: none; border-bottom:1px solid $gray-border-color; .img-box{ width:6rem; height:6rem; margin-right:1rem; @include radius(50%); overflow: hidden; img{ display: block; width:100%; height:100%; @include radius(50%); } } .shop-name{ line-height:2; height:3.6rem; font-weight:normal; font-size:1.8rem; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .text{ font-size:1.4rem; }}

問題解答

之前遇到過，解決辦法：首先.flex-item設置下最小寬度

min-width:0

然后.shopname設置下寬度

width:100%