微信小程序scroll-view樣式錯亂問題

在小程序中使用了scroll-view實現(xiàn)左右滑動效果，代碼大概如下

wxml:

<scroll-view scroll-x="true" class='container-body'>
    <view class="container-body-box">
      <view><image src="../../images/tupian.png"></image></view>
      <view class="tips"><text>一句話一句話一句話</text></view>
      <view class="tips"><text>一句話一句話一句話</text></view>
      <view class="tips"><text>一句話一句話一句話</text></view>
      <view class="tips"><text>一句話一句話一句話</text></view>
      <view><button class="buy">購買</button></view>
      <view class="tips"><text>一句話一句話一句話</text></view>
    </view>
    <view class="container-body-box">2</view>
    <view class="container-body-box">3</view>
    <view class="container-body-box">4</view>
</scroll-view>
 

wxss

.container-body{
width: 100%;
height: 990rpx;
overflow: hidden;
margin: 0 auto;
position: relative;
top: -120rpx;
text-align: center;
white-space:nowrap;
}
.container-body-box{
width: 90%;
height: 990rpx;
background: #fff;
margin: 0rpx 5%;
border-radius: 10rpx;
display: inline-block;
}
.tips{
text-align: left;
font-size: 36rpx;
line-height: 72rpx;
width: 90%;
margin: 0 auto;
}

出現(xiàn)的問題：如圖，后面的（2，3，4）的view全被擠壓下去了，1中里面的內(nèi)容有多高，后面的大概就被擠壓多少，到底是哪里出了問題？