如何阻止div元素重叠且保持宽度占满容器？

问题根源在于CSS默认的box-sizing: content-box：你设置的width:100%仅计算元素内容区域的宽度，再加上.show的padding:20px和border:2px black solid，元素实际总宽度会超出父容器，最终导致重叠。

核心修复方案 #

给.show类添加box-sizing: border-box，让width:100%包含padding和border的宽度，元素总宽度刚好等于父容器宽度：

.show {
  padding: 20px;
  border: 2px black solid;
  width: 100%;
  box-sizing: border-box; /* 关键属性 */
}

额外优化：修复容器溢出问题 #

你的#container设置了width:100%和padding:20px，同样会因为content-box导致容器超出视口，建议也给容器加上box-sizing: border-box：

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box; /* 避免容器溢出视口 */
}

修改后的完整代码 #

body {
  background-color: #D3D3D3;
}

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.section1 {
  display: flex;
  justify-content: center;
}

.section2 {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.show {
  padding: 20px;
  border: 2px black solid;
  width: 100%;
  box-sizing: border-box;
}

.section3 {
  display: flex;
  justify-content: center;
}

这样修改后，所有.show元素既能保持全宽占满父容器，又不会因为padding和border导致宽度溢出，重叠问题自然解决。

内容的提问来源于stack exchange，提问作者jared-dev