根本原因是input等替换元素默认min-width: auto，强制其宽度不低于内容宽度，直接覆盖flex-grow或width: 100%的计算逻辑；必须显式设置min-width: 0才能解除封锁，否则width: 100%在flex容器中基本无效。
width: 100% 为什么在 flex 容器里经常不生效
根本原因不是写错了 CSS，而是 input、textarea 等替换元素自带 min-width: auto —— 它会强制元素至少和内部内容一样宽，直接覆盖 flex-grow: 1 的伸缩逻辑。哪怕父容器设了 display: flex 和 flex: 1，这个默认行为也会让宽度“卡死”。
必须显式加 min-width: 0，这是硬性前提，不是可选项。不加它，width: 100% 在 flex 下基本等于摆设。
-
width: 100%和flex: 1别混用，尤其在 IE11 或嵌套 flex 中，两者规则冲突会导致宽度计算失效 - 旁边有图标按钮（如搜索按钮）时，记得给它加
flex-shrink: 0，否则它可能被压缩变形 - 更稳妥的写法是
flex: 0 1 0（不放大、可收缩、基准为 0），而不是看着简洁的flex: 1（等价于flex: 1 1 0%，第二个1表示“可被压缩”，但实际常被内容锁死）
box-sizing: border-box 不只是防溢出，它决定 width 的含义
box-sizing: border-box 的作用是让 width 表示“总宽”，即包含 padding 和 border。没它，width: 100% + padding: 12px + border: 1px 就会超父容器，造成横向滚动或布局错位。
但它不能解决所有问题：
- 移动端键盘弹出时，视口高度突变触发重排，
flex-grow可能误判剩余空间，输入框突然变窄 ——box-sizing能保尺寸不叠加，但拦不住重排本身 - 暗色模式切换时，
outline颜色变化引发重绘，若没设outline-offset，可能造成视觉跳动 -
textarea同样依赖它：不加box-sizing: border-box，min-height+padding容易让滚动条提前出现
textarea 自适应高度必须绕开 height: 100%
input[type="text"] 无法真正自适应高度，只能用 textarea 替代。但常见错误是直接设 height: 100% 或固定值，这会让自动撑高逻辑彻底失效。
正确做法是：
- 必须用
height: auto，配合min-height设最小高度 - 父容器是
display: flex时，要加align-self: flex-start，否则textarea可能被拉伸填满整行 - 禁用
resize: both，只留resize: vertical，防止用户拖宽破坏布局 - JS 动态计算高度时，别在
input事件里立刻读scrollHeight—— 字体未加载完会导致值偏小，建议用requestAnimationFrame延迟一帧再读
width: auto + max-width 是内容容器的黄金组合
对非表单类容器（如文章卡片、侧边栏、主内容区），width: auto 天然适配内容，但单独用容易在大屏下无限拉伸。此时 max-width 是安全阀：
-
width: auto让块级元素占满父容器，同时随窗口缩小而收缩 -
max-width: 960px防止宽屏下文本行长过长，影响阅读体验 - 配合
margin: 0 auto实现居中，比单纯width: 100%更利于内容聚焦 - 注意：如果父容器用了
flex或grid，子项的width: auto行为会受flex-basis或grid-column影响，需统一检查
真正麻烦的从来不是“怎么写”，而是哪些地方漏了 min-width: 0、哪些容器忘了设 box-sizing、哪些 textarea 还在用 height: 100% —— 这些点不显眼，但一出问题就难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
