为什么已设置box-sizing:border-box时子元素内边距会撑大父元素宽度

问题原因 #

这个现象是flex布局的默认尺寸计算规则和替换元素的固有宽度特性共同导致的，核心逻辑如下：

1. flex子项的默认最小宽度限制
   所有flex容器的直接子项默认min-width值为auto，这个规则的作用是保证子项的内容不会溢出被截断，但是也会导致父容器计算宽度时优先参考子项的最小内容宽度，而非先限制自身宽度再给子项分配空间。
2. 宽度计算的循环依赖
   你给.inputContainer设置了width: 100%，这个百分比宽度本应相对于父元素.row的宽度计算，但.row作为flex容器，在有多个子项时，会先累加所有子项的最小内容宽度作为自身的基础宽度，这就导致子项的100%宽度失去了明确的参考基准，最终回退到子元素内部内容的宽度。
3. input元素的宽度贡献
   input属于替换元素，自带浏览器预设的固有宽度，你额外设置的padding: 12px 20px会进一步增大它的最小内容宽度，当两个input的最小宽度之和超过form容器的可用宽度时，就会直接把.row容器撑大。
4. 特殊场景的表现原因

• 当.row只有1个.inputContainer子项时，子项的width:100%可以直接继承上层form的90vw宽度作为参考，不需要参考内容宽度，所以表现正常
• 当input的padding设为0时，input的最小内容宽度刚好小于等于300px的max-width限制，所以不会撑大父容器

修复方案 #

给.inputContainer添加min-width: 0，覆盖flex子项默认的min-width: auto规则即可：

.inputContainer {
  max-width: 300px;
  width: 100%;
  min-width: 0; /* 新增该行即可修复 */
}

内容的提问来源于stack exchange，提问作者Gergő Horváth