微信小程序使用scroll-view组件实现横向滚动

<view class='container'>
  <scroll-view scroll-x class='scroll'>
    <view class='scroll-item' wx:for='{{tabList}}' wx:key="item.id">
      {{item.name}}
    </view>
  </scroll-view>
</view>

.container {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.scroll {
  width: 750rpx;
  display: flex;
  white-space: nowrap;
  height: 100rpx;
}

.scroll-item {
  display: inline-block;
  width: 500rpx;
}

        想记录的原因是网上的教程都是说scroll-view的样式中的width设置为100%，但是实测中发现无法横向滚动，设置成固定值才能够滚动。