width动画在侧边栏中常失效，因flex容器中flex-basis优先覆盖width、min-width:0未设置导致无法压缩、非flex父容器不响应宽度变化、nowrap文本撑开容器、content-box下padding仍占空间；应优先用flex-basis、max-width或transform替代。
直接用 width 做折叠动画是最直观的写法，但也是最容易出问题的——width: 0 会破坏子元素的 flex 行为、触发重排、导致文字截断或图标错位，多数情况下不该作为首选。
为什么 width 动画在侧边栏里经常失效
width 看似可过渡，但在 flex 容器中它常被 flex-basis 覆盖；如果侧边栏是 flex: 0 0 auto 或没设 min-width: 0，浏览器会强制维持最小内容宽度，width: 0 根本压不下去。
- 父容器不是
display: flex或没设flex-direction: row，width改变不会影响主内容区布局 - 侧边栏内有
white-space: nowrap的长文本（比如 URL、日志行），会撑开容器，抵消width缩小效果 - 用了
box-sizing: content-box又加了padding，实际占用宽度 =width + padding，width: 0后仍占空间
如果非要用 width，必须配合 overflow-hidden 和 min-width: 0
仅靠 width 不足以实现“视觉折叠”，必须切断内容溢出和布局干扰：
- 给侧边栏加
overflow: hidden，否则文字/图标在width: 0下仍可能部分可见 - 显式声明
min-width: 0，否则 flex 项默认有最小宽度（通常 ≈ 内容宽度），width设再小也无效 - 避免
width: 0→ 改用width: 60px（图标区宽度）更安全，既保留可访问性，又避免子元素渲染异常 - 过渡必须写全：
transition: width 0.3s ease, overflow 0.3s ease——overflow变化也要过渡，否则收起瞬间会闪一下
width + transition 在什么场景下勉强可用
仅适用于结构极简、无 flex 子项、无换行文本的纯图标侧边栏，且只在桌面端可控断点下使用：
立即学习“前端免费学习笔记（深入）”；
- HTML 结构是普通
<div>包裹图标，没有display: flex或grid子容器 - 用媒体查询控制：比如
@media (max-width: 768px) { .sidebar { width: 60px; } }，而非 JS 切类名 - 主内容区不能依赖
flex: 1自动填满——得用margin-left: 60px配合动画，否则宽度变化后主区不会重排 - 别对
width做负值（如width: -240px），CSS 不支持负宽，会被忽略
真正该优先考虑的替代方案
想让主内容自动扩展、动画平滑、DOM 保持可访问，就别碰 width：
- 用
flex-basis+min-width: 0替代 ——flex-basis是可动画的，且能真实影响 flex 分配 - 用
max-width（如max-width: 0/max-width: 240px）比width更安全，尤其搭配flex-shrink: 0 - 移动端坚决用
transform: translateX()+overflow-x: hidden，不占文档流，GPU 加速，不干扰主内容布局
width 动画看着简单，但一旦嵌套 flex、含文本、跨设备适配，就变成调试黑洞。真正省事的做法，是绕开它。
