div宽度设置width:100%后再设置padding超出父元素( flex设置width: 100%后超过屏幕)|css:box-sizing

html

<div class="container">
	<div class="box" >
		测试
	</div>
</div>

css

.container {
	width: 200px; 
	border: 1px solid;
}		
.box {
	width: 100%; 
	padding: 20px; 
	border: 1px solid red; 
}

如下图所示，子元素宽度大于父元素，这样可能会导致屏幕溢出，出现滑动条

解决方法:利用box-sizing
box-sizing：content-box | border-box | inherit

• content-box
  默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box
  告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
  注：border-box 不包含 margin。
• inherit
  指定 box-sizing 属性的值，应该从父元素继承

我们可以在父元素中设置box-sizing: border-box
或者在子元素中设置box-sizing: content-box

个人该问题的最终解决方法：
全局设置 box-sizing: border-box
在全局css样式中设置该属性，可以使得在整个项目中设置的width和height方式都相同，设置的width即为所看到的宽度，不会出现容器“越界”的情况。
reset.css

* {
  box-sizing: border-box;
}

最终将该样式文件引用到整个项目即可，具体引用方法这里不再赘述