这种情景怎么解释？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;
}
}
