如何让Flexbox内的Input适配可用空间？

这个坑我之前踩过！Firefox对flex容器内表单元素的宽度计算逻辑确实和Chrome有点差异，只设width: 100%在Firefox里会因为flex布局的特性导致溢出，咱们用下面的方法就能完美解决：

核心解决方案 #

给Input设置flex: 1配合box-sizing: border-box，让它自动占据容器的剩余空间，同时避免内边距/边框导致的宽度溢出。

完整代码示例 #

HTML结构

<div class="flex-wrapper">
  <input type="text" placeholder="请输入内容">
  <button>提交</button>
</div>

CSS样式

.flex-wrapper {
  display: flex;
  width: 400px; /* 示例容器宽度，可根据需求调整 */
  border: 1px solid #eee;
}

.flex-wrapper input {
  flex: 1; /* 关键属性：让input分配剩余的所有空间 */
  box-sizing: border-box; /* 确保padding、border不会额外增加元素总宽度 */
  padding: 10px;
  border: 1px solid #ddd;
  border-right: none; /* 可选，让input和按钮无缝衔接 */
}

.flex-wrapper button {
  padding: 10px 20px;
  border: 1px solid #2196F3;
  background-color: #2196F3;
  color: white;
  cursor: pointer;
}

为什么这样有效？ #

• flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写：
  • flex-grow:1 让input在有剩余空间时自动扩展
  • flex-shrink:1 确保空间不足时input会自动收缩，不会溢出
  • flex-basis:0% 告诉浏览器从0开始计算可用空间，避免Firefox和Chrome的计算差异
• box-sizing: border-box 把元素的padding和border纳入宽度计算，不会因为这些属性让input实际宽度超出预期

之前只用width:100%失效的原因是：在flex容器中，width:100%是基于容器的总宽度计算，而不是扣除其他元素后的剩余宽度，所以当旁边有按钮这类固定宽度元素时，input的100%宽度加上按钮的宽度就会超出容器范围，Firefox对这种情况的处理更严格，就出现了溢出问题。

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