列表使用 css translateY 每个 view 向上偏移30px，但是列表最后会有空白？

列表使用 css translateY 每个 view 向上偏移30px，但是列表最后会有空白如下图红色标记部分，为多出的空白部分该如何消除这个空白部分

<block wx:for="{{9}}" wx:for-index="index" wx:key="item">
  <view class="friends" style="transform: translateY({{index * -72}}rpx);">

  </view>
</block>

.wxss

.friends {
  height: 280rpx;
  background: #FFFFFF;
  border: 6rpx solid #50C880;
  border-radius: 100px;
  margin: 0 40rpx;
  padding: 0 90rpx 0 20rpx;
  position: relative;
  flex-shrink: 0;
  box-sizing: content-box !important;
}