<scroll-view scroll-x= "true" class = "whole" animation = "{{ani_card}}">
<view class = "Cardbutton" >
<view class = "cardbutton_icon" wx:for = "{{12}}"><!--12-->
<button class = "cardbutton" style = "width : 350rpx; height: 570rpx;" bindtap = "clickcard"> 
<image class = "starcards_pic" mode = "widthFix" src ="{{starcardspic}}"></image>
</button>
</view>
</view>
</scroll-view>

wxss:

.whole{
  position:absolute;
  top: 415rpx; /*600 400rpx*/
  left: 0rpx; /*800rpx*/
  opacity:1.0;
  z-index: 10;
  background-color: transparent;
}

.cardbutton{
  background-color: transparent;
}

.Cardbutton{
  display:flex;
  flex-direction: row;
  align-items: center;
}

.starcards_pic{
  border-radius: 20px;
  overflow: hidden;
  width: 115%;
}

如代码所示，写了一段可以横向滚动展示12张卡牌(是卡牌，每一张图片也是button)的代码，但是不断左滑展示到最后一张卡牌的末尾，末尾的那部分也就是最后一张卡牌的右侧一部分会被截掉，请问这是为什么？