flex-grow无法直接过渡，因其为非数值型计算属性，无中间状态；应改用flex-basis、width或max-width等可动画数值属性配合transition实现平滑伸缩。
单独写 flex-grow: 1 加 transition: width 0.3s 不会得到平滑伸缩效果——浏览器无法对 auto 或 flex-grow 计算的动态宽度做插值动画，必须用可动画的数值类型打底。
为什么 flex-grow + transition width 会跳变
直接给 input 同时设 flex-grow: 1 和 transition: width，动画大概率失效或突变。根本原因是：flex-grow 分配的是“剩余空间”，这个值在渲染时才计算，不是 CSS 可过渡的数值类型；而 width: auto 或 width: fit-content 也不支持插值。
- 起始状态若为
width: auto，结束状态是width: 240px，浏览器无中间值可算，直接跳 - 哪怕你手动设了
width: 0→width: 240px，flex-grow仍会干扰布局逻辑，尤其当兄弟元素存在时 - Safari 对
width过渡的合成优化差，常伴随重排抖动
真正能动的写法：用 max-width + overflow + transform
要让伸缩有动画、不裁字、不丢焦点，得绕过 width，改用浏览器原生支持硬件加速的属性：
- 用
max-width控制伸展上限，起始设max-width: 0，展开设max-width: 320px，配合overflow: hidden - 更顺滑的做法是
transform: scaleX()：初始transform: scaleX(0)，展开时过渡到scaleX(1)，并用transform-origin: left center锚定左端 - 必须加
will-change: transform（仅在激活前 JS 动态添加，用完移除），否则 Safari 下首帧卡顿 - 别忘了
box-sizing: border-box，否则 padding 和 border 会让视觉宽度超出预期
Flex 布局里按钮和输入框怎么共存不打架
搜索框常带图标按钮，一动就挤、一缩就叠，关键在 flex 项行为隔离：
- 按钮必须加
flex-shrink: 0，否则小屏下会被压缩甚至消失 - 输入框用
flex: 1 1 auto（即flex-grow: 1; flex-shrink: 1; flex-basis: auto），再显式加min-width: 0防 Chrome 拒绝收缩 - 父容器禁用
flex-wrap: wrap，它在 iOS 键盘弹出时容易误判主轴尺寸，导致子项错位 - 移动端建议把按钮抽成
position: absolute叠在 input 右侧，释放水平空间，避免 flex 协调负担
移动端键盘弹出后伸缩失效怎么办
这不是 CSS 写错了，而是视口单位塌陷。iOS Safari 软键盘弹起时，vh 失效，flex 容器失去高度参考，整个伸缩链断掉：
- 删掉所有
height: 100vh或min-height: 100vh，改用min-height: 100dvh（Safari 16.4+ 支持） - 老版本 iOS 必须 JS 补位：监听
resize，检测window.visualViewport?.height变化，动态更新容器min-height - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，否则键盘会强制缩放页面，flex 布局彻底失准 - 别在
:focus-within里触发伸缩——Safari 对它的支持不稳定，改用 JS 的focusin/blur事件
真正难的从来不是写哪一行 CSS，而是整条链路：从视口单位是否可靠、到父容器 display 是否干净、再到兄弟节点有没有偷偷加 flex-shrink: 0 或 width，任何一环污染，flex-grow: 1 就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
