HTML/CSS中子元素溢出父容器：求原因分析与解决方法

问题场景 #

布局时出现子元素溢出父容器的情况，相关代码如下：

HTML代码 #

<div class="parent">
  <div class="child">Child one</div>
  <div class="child">Child two</div>
</div>

CSS代码 #

.parent{
  max-width:200px;
  background:lightblue;
  margin: 3rem auto;
  padding:1rem;
  border-radius:1rem
}

.child{
  margin:1rem;
  background:lightgray;
  padding:1rem;
  border-radius:1rem;
  width:100%;
}

当前效果 #

期望效果 #

问题原因 #

这是CSS标准盒模型的默认行为导致的：

• 设置width:100%时，该宽度仅指代元素的内容区宽度，不包含padding和margin。
• 父容器的max-width:200px包含自身的padding:1rem，因此父容器的内容区实际宽度为200px - 2*1rem。
• 子元素总宽度 = 内容区宽度（100%父内容区） + 左右padding:1rem + 左右margin:1rem，总宽度远超父容器可用宽度，最终引发溢出。

解决方法 #

方法1：给子元素设置box-sizing: border-box #

让width:100%包含padding和border，再调整间距适配父容器：

.child{
  margin:1rem;
  background:lightgray;
  padding:1rem;
  border-radius:1rem;
  width:100%;
  box-sizing: border-box; /* 新增 */
}

若要让子元素完全贴合父容器内边距，可修改父容器为弹性布局，用gap替代子元素的margin：

.parent{
  max-width:200px;
  background:lightblue;
  margin: 3rem auto;
  padding:1rem;
  border-radius:1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 替代子元素margin */
}

.child{
  background:lightgray;
  padding:1rem;
  border-radius:1rem;
  width:100%;
  box-sizing: border-box;
  margin:0; /* 移除原margin */
}

方法2：移除子元素的width:100% #

块级元素默认会占满父容器内容区，配合box-sizing: border-box避免padding撑宽元素：

.child{
  margin:1rem;
  background:lightgray;
  padding:1rem;
  border-radius:1rem;
  box-sizing: border-box; /* 新增 */
  /* 移除width:100% */
}

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