当使用 `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），而该值在窄容器（如 width: 30% 的 .container）中极易超出实际空间，导致按钮被挤出视口。
✅ 正确解法不是仅靠 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 属性，是解决此类“输入框撑出父容器”问题的关键一步。