设置input宽度100%时溢出form-group容器的原因求解

问题根本原因 #

该溢出现象是CSS默认盒模型content-box的计算规则导致的：
默认情况下，CSS盒模型采用content-box模式，你给元素设置的width属性仅对应元素内容区域的宽度，内边距padding、边框border的宽度会额外叠加在内容宽度之上，元素最终的总宽度计算公式为：

元素总宽度 = 内容宽度 + 左右内边距 + 左右边框宽度

对应你的代码：

• input设置了width: 100%，代表内容区域的宽度和父容器form-group的宽度完全相等
• 同时你给input设置了左右各2rem的内边距，没有边框
• 最终input的总宽度 = form-group容器宽度 + 4rem，自然就会超出父容器边界，覆盖到父容器的外边距区域

修复方案 #

方案1（最推荐）：修改盒模型为border-box #

border-box模式下，元素的总宽度直接等于你设置的width值，padding和border会被包含在这个宽度内，内容区域自动压缩。建议全局设置统一盒模型，避免后续出现同类问题：

/* 全局统一盒模型，放在CSS代码最顶部 */
* {
  box-sizing: border-box;
}

如果不需要全局修改，仅给当前input添加属性即可：

input {
  box-sizing: border-box;
  /* 保留你原有的其他样式 */
}

方案2：用calc函数动态计算宽度 #

如果你不想修改盒模型，也可以手动计算内容区域的宽度，减去padding的占用宽度：

input {
  /* 减去左右各2rem的padding总宽度 */
  width: calc(100% - 4rem);
  /* 保留你原有的其他样式 */
}

内容的提问来源于stack exchange，提问作者Gia Phu Tang