设置width:100%的容器添加子div后Chrome中溢出问题求助

这是Chrome里盒模型与flex布局交互导致的典型布局问题，我帮你拆解下原因并给出修复方案：

问题核心原因 #

你的#mainContainer设置了width: 100%和border: 1px solid black，但浏览器默认的content-box盒模型下，width仅计算元素内容区域的宽度，加上左右各1px的边框后，容器总宽度会超出父元素（body）的可用宽度。

Chrome在处理flex容器的子元素时，布局计算会更严格，这就导致原本可能被隐藏的溢出问题在添加子元素后显现出来（这也是部分用户无法复现的原因——不同浏览器/版本的布局计算细节有差异）。另外body默认自带8px的margin，也会进一步挤压可用空间，加剧溢出。

修复方案 #

只需两个简单的CSS调整就能解决：

1. 给#mainContainer设置box-sizing: border-box，让width属性包含边框和内边距的宽度
2. 重置body的默认margin，消除不必要的空白和布局偏移

修改后的完整CSS代码：

body { 
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
  background-color: steelblue;
  margin: 0; /* 移除body默认margin */
}
#mainContainer { 
  width: 100%; 
  border: 1px solid black; 
  display: flex; 
  justify-content: center; 
  flex-direction: column;
  box-sizing: border-box; /* 让width包含边框宽度 */
}
.genContainer { 
  width: 50%; 
  display: flex; 
  justify-content: center; 
}
.square { 
  width: 5%; 
  border: 1px solid black; 
}
.circle { 
  width: 5%; 
  border: 1px solid black; 
  border-radius: 50%; 
}

额外优化建议 #

如果想避免后续其他元素出现类似的宽度计算问题，可以在CSS最顶部添加全局盒模型重置：

* {
  box-sizing: border-box;
}

这样所有元素都会默认使用border-box盒模型，布局计算会更直观可控。

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