CSS Flexbox四列布局小屏幕换行：padding为何引发布局异常

问题场景 #

实现四列Flexbox布局时，已设置flex: 0 0 25%、box-sizing: border-box和padding: 30px，大屏显示正常，但小屏幕下第四列自动换行；将左右padding设为0后布局恢复正常，需解析原因。

实现代码 #

CSS代码 #

* {
  box-sizing: border-box;
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: #f3f3f3;
}
.container {
  border: 5px solid red;
  display: flex;
  flex-wrap: wrap;
}
.box {
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: #f3f3f3;
  flex: 0 0 25%;
}
.box-1 {
  background: #581f18;
}
.box-2 {
  background: #f0a202;
}
.box-3 {
  background: #d95d39;
}
.box-4 {
  background: #202c59;
}

HTML代码 #

<div class="container">
      <!-- children = flex-items -->
      <div class="box box-1">1</div>
      <div class="box box-2">2</div>
      <div class="box box-3">3</div>
      <div class="box box-4">4</div>
</div>

原因解析 #

• box-sizing: border-box的作用边界：该属性仅让.box的宽度包含自身的padding和border，但flex: 0 0 25%中的25%是相对于flex容器的content区域宽度（容器默认box-sizing: content-box，其总宽度包含自身border）。
• 像素取整导致宽度溢出：当屏幕宽度不是4的整数倍时，25%的容器宽度会产生小数像素值（比如容器宽度为999px时，25%为249.75px）。浏览器渲染时会将小数像素向上取整为整数，四个.box的总渲染宽度就会超过容器的实际宽度，触发flex-wrap: wrap使第四列换行。
• 滚动条加剧问题：小屏幕下页面出现垂直滚动条，会占用部分视口宽度，导致容器的可用宽度进一步变为非4的整数倍，放大了像素取整带来的宽度溢出问题。
• padding的间接影响：移除左右padding后，.box的内容区域宽度缩小，浏览器处理小数像素的取整逻辑发生变化，四个元素的总渲染宽度刚好不超过容器宽度，因此布局恢复正常。

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