侧边栏收缩动画需显式约束盒模型：必须设box-sizing:border-box、min-width:0和overflow:hidden；文字用width:0+opacity:0+overflow:hidden隐藏，图标用flex-shrink:0防压缩；推荐flex-basis替代width，父容器及主内容区均需设min-width:0。
直接用 width 做收缩动画，大概率会出视觉错位、文字撑开、图标偏移或动画跳变——根本原因不是写法错，而是盒模型行为没被显式约束。
box-sizing: border-box 必须加在侧边栏上
默认 content-box 下，width: 240px + padding: 16px + border: 1px = 实际占宽 274px，收缩时只改 width，padding 和 border 还在撑空间。动画终点永远不准。
- 统一加
box-sizing: border-box，让width包含 padding 和 border - 如果用了
flex-basis，同样要配box-sizing: border-box，否则 flex 计算宽度时仍按 content-box 算 - 别依赖浏览器默认值，显式声明，避免 Safari/旧 Edge 渲染不一致
overflow: hidden 和 min-width: 0 缺一不可
只设 width: 60px 不管用，因为 flex 项默认有 min-width: auto，内部长文本或 SVG 图标会强行撑宽容器，导致“缩不动”。
- 侧边栏必须加
min-width: 0，解除 flex 默认最小宽度保护 - 必须同步加
overflow: hidden，否则收缩后文字/图标边缘可能溢出可见 - 二者必须同时存在，缺一个都会让动画卡在“半缩状态”
padding 和文字隐藏不能靠 width: 0 来解决
width: 0 会破坏子元素布局流，图标用 float 或 absolute 会脱离容器，文字用 display: none 会中断过渡，opacity: 0 又继续占空间。
立即学习“前端免费学习笔记（深入）”；
- 文字区域用
.sidebar-collapsed .nav-text { width: 0; opacity: 0; overflow: hidden; white-space: nowrap; } - 图标区域用
.sidebar-collapsed .nav-icon { flex-shrink: 0; }防止被 flex 压缩变形 - 所有过渡必须同步：比如
transition: width 0.3s ease, opacity 0.3s ease, overflow 0.3s ease
flex-basis 比 width 更稳，但单位必须写死
用 flex-basis 替代 width 是更健壮的选择，但它对初始值和单位极其敏感。
- 初始态写
flex: 0 0 240px，收缩态写flex: 0 0 64px，禁止混用auto和具体数值 - 不要用
calc()包变量（如calc(240px - 180px)），部分浏览器插值失败导致跳帧 - 父容器必须是
display: flex且flex-direction: row，用开发者工具确认 computed 样式是否生效
最常被忽略的点是：主内容区也要加 min-width: 0。否则侧边栏一缩，它内部的长 URL 或表格就顶破布局——这不是侧边栏的问题，是 flex 容器里“未设收缩底线”的连锁反应。
