如代码所示 设置justify-content: space-between后并没有两边对齐 两个元素还是挤在一起的 这是怎么回事？

<scroll-view scroll-y="true" class="sc">
        <view class="item" style="width: 310rpx;min-height: 200rpx;" wx:for="{{goodsList}}">
            <image style="width: 310rpx;height:200rpx;" src="{{item.logo}}"></image>
        </view>
</scroll-view>

.sc{
  width: 100%;
  height: calc(100vh - 220rpx);
  display: flex;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  justify-content: space-between;
}
.item{
  display: inline-flex;
}