为何带padding的Container会溢出父容器？如何解决该问题？

1. 为什么.Container会溢出其父容器，而.Container2不会？
2. 二者仅有的区别是.Container设置了padding，为什么padding会拉伸其外部尺寸？
3. 若必须保留padding，正确的解决方法是什么？

示例代码 #

CSS代码 #

.Outside {
  width: 400px;
  height: 1000px;
  padding: 0px;
  background-color: orange;
}

.Container {
  width: 100%;
  padding: 5px;
  display: flex;
  background-color: blue;
  flex-direction: column;
}

.Container2 {
  width: 100%;
  display: flex;
  background-color: blue;
  flex-direction: column;
}

.Item {
  background-color: red;
  width: 100%;
  height: 50px;
}

HTML代码 #

<div class="Outside">
  <div class="Container">
    <div class="Item">
    </div>
    <div class="Item">
    </div>
  </div>
  <div class="Container2">
    <div class="Item">
    </div>
    <div class="Item">
    </div>
  </div>
</div>

溢出原因 #

这是CSS盒模型的默认规则导致的：默认的content-box盒模型中，元素的width仅代表内容区域的宽度，padding和border是额外叠加在内容宽度之外的。

.Container设置了width: 100%（即继承父容器的400px宽度），再加上左右各5px的padding，总宽度就变成了400px + 5px*2 = 410px，超过了父容器的400px限制，因此产生溢出。而.Container2没有padding，总宽度刚好等于父容器宽度，所以不会溢出。

padding拉伸外部尺寸的原因 #

这是W3C标准盒模型（content-box）的定义：元素的总宽度 = 内容宽度（width属性值） + padding + border。padding是元素内容与边框之间的内边距，默认是向外扩展的，相当于给元素的内容区域“套了一层额外空间”，自然会让元素的整体尺寸变大，进而超出父容器的宽度限制。

保留padding的解决方法 #

有两个实用且常用的方案：

1. 添加box-sizing: border-box属性
   给.Container设置这个属性后，padding和border会被包含在你设置的width值内部，元素的总宽度会保持为100%（即400px），padding会从内容区域中挤压空间，不会向外拉伸。修改后的.Container样式如下：

   .Container {
     width: 100%;
     padding: 5px;
     display: flex;
     background-color: blue;
     flex-direction: column;
     box-sizing: border-box; /* 新增该行 */
   }
   

   如果你希望页面中所有元素都遵循这个盒模型规则，可以全局设置：

   * {
     box-sizing: border-box;
   }
   

2. 移除width: 100%属性
   由于.Container是flex容器（display: flex），同时它属于块级元素，默认会自动填充父容器的可用宽度。去掉width: 100%后，它会自适应父容器的宽度，padding会向内挤压内容区域，元素的整体宽度不会超过父容器的限制。

内容的提问来源于stack exchange，提问作者Claude Hasler