scroll-view下，scroll-x 跟flex-direction冲突？

原本在view下，效果是这样的

RT 一共8个区， 希望能横向滑动，于是把最外层view 改成 scroll-view，结果是这样

第二个区及后面的区匪夷所思地竖向排列了？？

为啥scroll-view干扰了flex布局的横向flex方向..把横向生生变成了竖向？？

代码如下

    <scroll-view scroll-left="20rpx"  scroll-x="true" class="head-wrp flex-horizonal" style="height:{{sbscrollview}};display:flex;white-space:nowrap">

        <view bindtap="Tab" data-position="2"  class="head-item {{selected2}}"><text data-position="2">东区</text></view>

        <view bindtap="Tab" data-position="3"  class="head-item {{selected3}}"><text data-position="3">西区</text></view>

        <view bindtap="Tab" data-position="4"  class="head-item {{selected4}}"><text data-position="4">南区</text></view>

    </scroll-view>

在js的page data里  sbscrollview:200rpx

wxss

.head-wrp{

    height: 66rpx;

    position:fixed;

    width: 100%; /*也试过700rpx*/

    display: flex;   

    border-bottom: solid thin green;

}

.head-item{

     font: 30rpx 方正黑体简体 ;

     letter-spacing: 4.32rpx;

     color: #333333;

     width:120rpx; /*也试过12.5%*/

     height: 100%; /*在父元素200rpx生效的情况下，也试过设为200rpx*/

     display: flex;

     align-items: center;

     justify-content: center;

}

flex-horizonal {

    display:flex;

    flex-direction:row; /*这句在view里好好的，在scroll-view里不起作用？？*/

    align-items:center;

}

设置父子固定高度、宽度、父子元素white-space:nowrap 、父子display:flex  、填满父元素 全都不起作用

是版本问题么？

开发者工具 v0.17.172600

如果往scroll-view下面再加一层view，倒是可以横向排列，问题是没法scroll了。。