为何flex容器会溢出？Windows Chrome/Edge特定场景技术问询

问题场景 #

设置了带小数像素宽度的flex容器，包含8个flex:1的子元素，预期容器不会溢出，但实际出现水平滚动条。触发条件：

• 仅在Windows系统的Chrome或Edge浏览器中出现（Firefox无此问题）
• 容器宽度为xxx.45px（示例中为100.45px）
• 恰好包含8个子元素（1-7个时表现符合预期）
• 仅在屏幕缩放比例为100%的副屏上出现，125%缩放的主屏无此问题

示例代码：

.d1 {
  display: flex;
  overflow: auto;
  height: 100px;
  width: 100.45px;
}

.d1 > * {
  flex: 1;
  border: 1px solid blue;
}

<div class="d1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

实际表现：Chrome/Edge中出现水平滚动条，计算值显示容器宽度为100.438px，每个子元素宽度为12.563px，总和100.504px超过容器宽度；Firefox无溢出。

原因分析 #

这是Blink引擎（Chrome/Edge基于该引擎）的小数像素渲染精度问题：当容器宽度无法被子元素数量整除时，Blink在计算每个flex子元素宽度时会进行像素值的近似处理（四舍五入），导致子元素总宽度累计后超过容器实际宽度。而Firefox的Gecko引擎采用了更精确的累计计算逻辑，避免了这类溢出。

解决方案 #

1. 强制子元素按比例分配空间 #

给子元素添加flex-basis: 0，让浏览器严格按照flex比例分配空间，而非基于内容宽度计算：

.d1 > * {
  flex: 1 1 0%;
  border: 1px solid blue;
}

2. 调整容器宽度为可整除值 #

将容器宽度设置为能被子元素数量（8）整除的数值，比如100.4px（100.4/8=12.55）或直接取整为100px，从根源避免小数整除带来的精度误差。

3. 使用calc()精确分配宽度 #

替代flex:1，直接用calc()计算子元素宽度，同时开启box-sizing: border-box确保边框包含在宽度内：

.d1 > * {
  width: calc(100% / 8);
  border: 1px solid blue;
  box-sizing: border-box;
}

4. 隐藏溢出（临时方案） #

若不需要滚动条且允许微小内容截断，可给容器设置overflow: hidden，但这仅为视觉隐藏，未解决计算本质问题。

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