小程序scroll-view设置的scroll-x失效的问题

问题：

<scroll-view scroll-x class="tab-scroll  bc_white flex">
  <view a:for="{{tabs}}" class="text-c flex flex-a-center flex-j-center u_30 {{item.id===activeTab?'active':'u_gray'}}" 
      onTap="onTypeChange" data-id="{{item.id}}">{{item.name}}
  </view>
</scroll-view>

css代码：
.tab-scroll{
   width:100%
}
.tab-scroll view{
  width:25%;
}
发现子元素设置的宽度失效且tab不能横向滑动

解决

方法一：
解决方案：给宽度无效的子元素添加flex:none;
<scroll-view scroll-x class="flex bc_white">
  <view a:for="{{tabs}}" class="tab-item flex flex-j-center flex-a-center u_30 {{item.id===activeTab?'active-tab':'u_gray'}}" onTap="onTypeChange" 
    data-id="{{item.id}}">{{item.name}}
  </view>
</scroll-view>

.tab-item{
  flex:none;
  width: 25%;
  padding: 20rpx 0;
}
.active-tab{
  border-bottom: 4rpx solid #0088FE;
  color:#0088FE;
}

原理：
给父元素设置display:flex之后里面的子元素设置宽度无效的问题：

父元素设置了flex之后，导致内部的block布局变成了flex布局，

在子元素们加起来的宽度<父元素宽度的情况下，子元素宽度是有效的，

但是一旦子元素们撑破父元素，就会导致有些子元素设置宽度无效，
flex:none;表示尺寸不会收缩也不会扩展，元素内的内容不会换行，会无视父容器的尺寸限制，直接溢出父容器

方法二：
<scroll-view scroll-x class="tab-scroll  bc_white">
  <view a:for="{{tabs}}" class="tab-item flex flex-j-center flex-a-center u_30 {{item.id===activeTab?'active-tab':'u_gray'}}" onTap="onTypeChange" 
    data-id="{{item.id}}">{{item.name}}
  </view>
</scroll-view>
.tab-scroll{
  width: 100%;
  white-space: nowrap;
}
.tab-scroll view{
  width: 25%;
  height: 90rpx;
  display: inline-flex;
}
.tab-scroll  .active{
  border-bottom: 4rpx solid #0088FE;
  color:#0088FE;
}