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

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

wxml代码
    
    {{scoreInfo.objName}}
    
      {{tools.getInt(scoreInfo.score)}}
    

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

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