小程序 外层view设置宽100%后再设置padding会导致页面不固定的问题

wxss代码
.container-item1 {
  width: 100%;
  background-color: white;
  flex-direction: column;
  padding: 30rpx;
}

wxml代码
    <view class='container-item1'>
    <text class='view-white' style='font-size:32rpx;'>{{scoreInfo.objName}}</text>
    <view class='container-item1-item'>
      <text class='view-white' style='font-size:32rpx;color:#E53770;'>{{tools.getInt(scoreInfo.score)}}</text>
    </view>

真机预览发现页面不固定，最后找到原因是container-item1设置宽100%后再设置padding导致控件宽度超过了屏幕宽度（很奇怪），从而导致整体页面可以左右拖动，然后再设置box-sizing: border-box;属性后就正常了，改动之后如下。

.container-item1 {
  width: 100%;
  background-color: white;
  flex-direction: column;
  padding: 30rpx;
  box-sizing: border-box;
}