Flex容器无法容纳30px宽按钮问题求助

问题根源在于浏览器给<button>的默认样式——默认的内边距、边框没有被包含在你设置的30px宽度内，再加上flex布局的计算逻辑，最终导致按钮溢出容器。

直接给你几个关键修复点：

• 给button添加box-sizing: border-box，让padding和border都算入指定的30px宽度内
• 重置button的默认内边距（可选但推荐），避免浏览器默认样式带来的额外宽度
• 给input添加min-width: 0，防止input因默认最小宽度限制挤压按钮空间

修正后的完整代码：

.container {
  width: 200px;
  border: solid 1px red;
  box-sizing: border-box;
}

.flex {
  display: flex;
  gap: 10px;
  width: 100%;
}

input {
  flex: 1;
  min-width: 0; /* 关键：解除input的最小宽度限制 */
}

button {
  flex: 0 0 30px;
  height: 30px;
  aspect-ratio: 1;
  box-sizing: border-box; /* 关键：把边框内边距算入宽度 */
  padding: 0; /* 重置默认内边距，彻底避免宽度溢出 */
  border: 1px solid #ccc; /* 自定义边框，按需调整 */
}

<div class="container">
  <div class="flex">
    <input type="text">
    <button>X</button>
  </div>
</div>

补充说明：

• box-sizing: border-box是核心，它改变了元素宽度的计算逻辑，将border和padding都包含在指定的width值中，而非额外叠加。
• 浏览器默认给input设置了min-width: auto，当设置flex:1时，input会优先保留自身最小宽度，反而挤压按钮空间；添加min-width:0后，input才能真正被flex容器压缩到合适宽度。

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