flex布局在微信和QQ的内置浏览器显示正常，但是在手机自带的浏览器中部分布局出错

Question

如图，我这个react项目整个项目大量使用flex布局，但是只有这种结构的地方出错
这是我微信正常显示的结构

这是我手机浏览器的里出错的结构

这种结构的代码：jsx:

render(){
    return(

        <Link to={'/detail/' + this.state.itemInfo.id} className="goodWrapper clearfix" onClick={this.showId}>
            <div className="goodInner">
                <div className="goodpic">
                    <img src={this.state.itemInfo.goodPic}/>
                </div>
                <div className="describe">
                    <h1 className="goodTitle">{this.state.itemInfo.goodTitle}</h1>
                    <div className="priceWrapper">
                        <span className="price">售价：</span><span className="goodprice">{this.state.itemInfo.goodPrice}</span>
                    </div>
                </div>
            </div>
        </Link>
    )
}

样式：

.goodWrapper{
  width: 100%;
  padding-top:10px;
  background: #fff;
  display: block;
}
.goodInner{
  display: flex;
  width: 90%;
  margin:0 auto;
  border-bottom:1px solid #e5e5e5;
}
.shopCart .ant-checkbox-wrapper{
  margin-right:0 !important;
}
.goodpic{
  flex:0
}
.goodpic img{
  border-radius: 5px;
  width: 100px;
}
.describe{
  flex:1;
  margin-left: 15px;
}
.goodTitle{
  font-size: 13px;
  margin-top: 10px;
}
.priceWrapper{
  padding-top: 5px;
}
.price{
  font-size: 12px;
  color: #555;
}
.goodprice{
  font-size: 16px;
  padding-top: 20px;
  font-weight: bold;
  color: #f92f15;
}
.goodsItemInCartInfo{
  margin-left: 10px;

}
.goodsItemInCartName{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

有大神知道怎么回事嘛？感激不尽。。。

Answer 1

谢邀，不知道你的手机是什么版本号，安卓手机的自带浏览器内核有些并不相同，依你的第二张图片来看，比较像是goodpic或img元素被默认加上了position:absolute;样式,让他脱离了文档流

排查方案

1，检查此浏览器是否支持flexbox布局，如果不支持，根据情况更换布局方式
可以尝试补全样式头-webkit-flex
2，在goodpic元素上添加样式position:relative;

Answer 2

凡是flex都加上兼容试试，display: -webkit-flex;-webkit-flex: 1;