C/C++模板类模板与函数模板区别，以及用法详解

 <view class="type-container">
            <view class="chooseType ">
                <view class="type-item active">
                    <view class="type-item-title">xxx1</view>
                    <view class="active-icon">
                        <Vicon name="play" color="#FFFFFF" size="32rpx" class="arrow-icon"></Vicon>
                    </view>
                </view>
            </view>
            <view class="scroll-box">
                <scroll-view scroll-x="true" class="type-items">
                    <view class="scroll-item1" wx:for="{{6}}" wx:key="index" >
                        <view class="type-item ">
                            <view class="type-item-title">xxx{{index}}</view>
                        </view>
                    </view>

                </scroll-view>
            </view>

        </view>

想法：大盒子写display：flex,右边flex：1，自适应宽度，但是这样写了之后右边划不动
解决办法，右边flex：1;width:0;
样式如下

.type-container {
    height: 138rpx;
    width: 750rpx;
    display: flex;
}

.type-items {
    white-space: nowrap;
}

.scroll-box {
    flex: 1;
    width:0;

}

.chooseType {
    padding-right: 24rpx;
    padding-left: 32rpx;
    height: 60rpx;
    line-height: 60rpx;
}

.type-item {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 30rpx;
    padding: 0 24rpx;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;

}

.scroll-item1 {
    display: inline-block;
    height: 60rpx;
    line-height: 60rpx;
    margin-right: 24rpx;
}

效果如图

左边xxx0固定，右边得部分滚动~
至于为什么用width:0;目前没有找到原因但是这样就可以做到