微信小程序scroll-view样式错乱问题

Question

在小程序中使用了scroll-view实现左右滑动效果，代码大概如下

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;
}

出现的问题：如图，后面的（2，3，4）的view全被挤压下去了，1中里面的内容有多高，后面的大概就被挤压多少，到底是哪里出了问题？

Answer 1

加一句，让它们顶部对齐

.container-body-box{
    vertical-align: top;
}