小程序scroll-view 水平滚动的不滚的问题

官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
官方这个例子里，垂直方向是OK的，水平我是滚不动的。直接套用到我自己的小程序里，也依然是滚不动的。事实证明缺少必要的CSS。

wxml

<scroll-view class="video-list" scroll-x="true" scroll-with-animation="true">
      <view class="video-list-item current">卡农弹奏示范</view>
      <view class="video-list-item">卡农钢琴手把手教学</view>
      <view class="video-list-item">卡农钢琴手把手教学2</view>
      <view class="video-list-item">配套练习</view>
      <view class="video-list-item">配套练习</view>
</scroll-view>

css

.video-list {
  white-space: nowrap;
  display: flex;  
  align-items: flex-start;
  width: 100%;  /*有小坑*/
}

.video-list-item {
  display: inline-block;
  border: 1px solid #eee;
  margin: 10rpx;
  width: 300rpx;
  height: 100rpx;  
  white-space: normal;
  overflow: hidden;
  padding: 10rpx;
}

重点在父元素和子元素display的设置上，还有white-space。

坑来了
.video-list的width:100%，这个一般是没有问题的，也就是页面通栏滚动。
但是我的scroll-view就是不滚，当我修改为width:750rpx，它好了，滚了。
问题是，我还有一个页面用到了scroll-view，也是100%的width，没有出现问题，那么问题在哪？

查看DOM，为了做条件判断，这个scroll-view外边包裹了一个view容器，其display:block。
修改view为block容器，一切正常了。