当使用 `display: flex` 布局让输入框（``）自适应剩余空间、按钮固定尺寸时，输入框可能意外溢出父容器——根本原因常是 `` 的默认 `size` 属性（值为 20）导致浏览器为其分配过宽的初始尺寸，覆盖 `flex: 1` 的弹性行为。

在 Flex 布局中，flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0）本应使 占据 .row 中除按钮外的所有可用空间。但问题在于：原生 元素具有隐式的 HTML size 属性（默认值为 20），它会强制浏览器按“可显示约 20 个字符宽度”来计算其基础尺寸（flex-basis），

✅ 正确解法不是仅靠 CSS 调整 flex，而是从语义和渲染源头控制输入框的初始尺寸：

• 添加 size 属性到 HTML 标签中（例如 size="4"），显式声明其基础字符宽度；
• 结合 flex: 1，此时 flex-basis 将基于更小的 size 值计算，flex-grow 才能正常拉伸填满剩余空间；
• 同时确保父容器具备明确宽度约束（如你的 .container { width: 30% }）且未被子元素破坏盒模型。

以下是修复后的完整代码示例：

  

    
       
      ?
    
  

.container {
  margin: auto;
  padding: 1rem;
  width: 30%;
  box-sizing: border-box;
}

.row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 可选：增加按钮与输入框间距，提升可读性 */
}

.row input {
  flex: 1;
  min-width: 0; /* 推荐添加：防止某些浏览器下 input 忽略 flex-basis=0 时的最小内容宽限制 */
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.row button {
  width: 40px;
  height: 40px;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

⚠️ 注意事项：

• size 是 HTML 属性，不可通过 CSS 设置（input { size: 4 } 无效）；
• 若需完全响应式控制，可配合 min-width: 0 + flex: 1 防止输入框因内部文本或字体导致的意外溢出；
• 避免同时设置 width: 100% 或 max-width 在 input 上，否则会与 flex 行为冲突；
• 在现代项目中，也可考虑用 或自定义组件替代原生 text，但 size 属性仍是兼容性最佳的底层修复手段。

总结：Flex 布局失效往往不源于 CSS 逻辑错误，而来自 HTML 元素的隐式行为。理解并显式覆盖 的 size 属性，是解决此类“输入框撑出父容器”问题的关键一步。