css3 - 这种情景怎么解释？display:flex 遭遇 white-space: nowrap;

html如下，使用了flex-box布局，左边图片的img-box定宽，右边的css定义了flex-item，然后对shop-name进行了单行不换行截断，这时候就发现左边的图片被挤扁了，小于定的宽度。发生这个情况在chrome上，ios和安卓的微信下正常.

chrome效果见图：

    

    

        
有家餐厅（京华城店）
        
满100减20
    

(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;
  }
}