CSS中按钮超出absolute定位父容器的布局问题排查

按钮超出父容器是两个默认CSS规则共同导致的：

1. 默认盒模型为content-box：你给.btn设置的width: 100%仅指代内容区域宽度，元素实际占据的横向空间 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距。当前按钮设置了8px的横向内边距、8px的横向外边距，算下来实际宽度比父容器多了32px，必然溢出。
2. 绝对定位元素的宽度默认由内容撑开：你给.container设置了position: absolute但没指定宽度约束（比如width值、left/right偏移），容器宽度不会自动占满父级，而是跟着内容宽度走，和你预期的“按钮撑满容器”的前提不匹配。

修改点对应问题逐一调整：

• 给按钮设置box-sizing: border-box，让width: 100%的计算范围包含内边距和边框，不会因为内边距撑大元素
• 给绝对定位容器增加宽度约束，比如用left:0; right:0让它占满定位上下文的可用宽度，也可以直接指定固定宽度
• 去掉按钮的横向外边距，改用容器的内边距做左右留白，避免外边距溢出容器

完整修复代码如下：

.container {
  position: absolute;
  left: 0;
  right: 0;
  /* 如果不需要撑满宽度，也可以替换成固定宽度，比如 width: 300px; */
  background-color: yellow;
  padding: 0 8px;
}

.btn {
  padding: 8px;
  margin: 8px 0;
  width: 100%;
  box-sizing: border-box;
  display: block;
  background-color: blue;
  color: #fff;
  border: none;
}

<div class="container">
  <button class="btn">Text</button>
  <button class="btn">Text2</button>
</div>

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