微信小程序 页面的的滚动问题

<view class="container">

  <view  id="1" class="order_top">
    <block wx:for="{{types}}">
      <view   bindtap="getOrder" data-value="{{item.value}}">{{item.title}}</view>// 导航栏
    </block>
  </view>

  <scroll-view id="1"  class="order-scroll" scroll-y="true" scroll-x="true">

    <block  wx:for="{{orders}}">
     
          <navigator class="order_nav" url="../detail/detail?id={{item.order_id}}">
            <view class="order-detail">
                //   订单循环 
            </view>
          </navigator>

    </block>

  </scroll-view>
</view>

.container {
 
}

.order_top {
  position: fixed;
  top: 0;
  left: 0;
  height: 80rpx;
  width: 100%;
  background-color: white;
  margin-bottom: 0rpx;
}

.order-scroll {
  margin-top: 80rpx;
  position: fixed;      // 为什么 要设置  position:flex ; 才能在滚动时，  scroll-view 中的文字等 不会显示在上面的 view 中 
  top: 30rpx;

  bottom: 0rpx;   要设置 top  和  bottom  才能进行滚动 。？

  left: 0rpx;
  right: 0rpx;
  width: 100%;
  border-bottom: 1px solid #d5d5d5;
  background-color: #fff;
}