Flexbox容器宽度异常：添加左右padding致宽度超出的解决方法

你的问题核心是CSS盒模型设置错误，导致flex容器加padding后宽度溢出。默认的content-box盒模型会把padding和border算在元素设置的宽度之外，所以给设了width:100%的flex容器加左右padding后，总宽度会超过父容器，出现滚动条。

解决步骤： #

1. 修复盒模型设置并全局应用
   你代码里html, body的box-sizing存在语法错误（border: box是笔误），正确写法是box-sizing: border-box;。更稳妥的方式是把这个盒模型应用到所有元素，确保所有元素的padding和border都包含在设置的宽度内：

   * { 
     margin: 0; 
     padding: 0; 
     box-sizing: inherit; /* 继承父元素的盒模型 */
   }
   html { 
     box-sizing: border-box; /* 根元素设置border-box，所有子元素继承 */
     width: 100%; 
   }
   body { width: 100%; }
   

2. 调整flex容器的padding设置
   当全局盒模型正确设置后，给flex容器添加左右padding就不会导致宽度溢出了，直接设置完整的padding值即可：

   .container.flex { 
     display: flex; 
     width: 100%; 
     border: 1px solid red;
     padding: 20px; /* 上下左右都加20px padding */
     gap: 20px;
   }
   

修正后的完整代码： #

CSS

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: inherit;
}
html { 
  box-sizing: border-box;
  width: 100%; 
}
body { width: 100%; }

.container { padding: 20px; }

.container.flex { 
  display: flex; 
  width: 100%; 
  border: 1px solid red;
  padding: 20px;
  gap: 20px;
}

.container.flex .box { flex-basis: 100%; }

.one { background: #80558C; }
.two { background: #AF7AB3; }
.three { background: #CBA0AE; }
.four { background: #E4D192; }
.five { background: #576F72; }

HTML

<div class="container">
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
  <div class="box four">Box 4</div>
  <div class="box five">Box 5</div>
</div>

<div class="container flex">
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
  <div class="box four">Box 4</div>
  <div class="box five">Box 5</div>
</div>

补充说明： #

• border-box盒模型会让元素的width属性包含内容、padding和border的总宽度，所以设置width:100%后，加padding不会让元素超出父容器。
• 如果你不想全局设置盒模型，也可以单独给.container.flex设置box-sizing: border-box;，但全局设置是更通用的解决方案，能避免后续其他元素出现类似问题。

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