最可靠方式是用flex-basis配合min-width:0和overflow:hidden；因flex-basis优先级高于width，且未设min-width:0时浏览器按内容最小宽兜底，导致width动画失效。
用 flex-basis 配合 min-width: 0 和 overflow: hidden 是最可靠的方式，width 动画在 flex 容器里大概率失效，别硬刚。
为什么 width 过渡经常不生效
直接写 transition: width 0.3s 看似合理，但实际常卡住或跳变：
-
flex-basis优先级高于width，父容器是display: flex时，width被忽略 - 没设
min-width: 0，浏览器会按内容最小宽度兜底（比如文字撑开的宽度），width: 0压不下去 - 侧边栏内有
white-space: nowrap的长文本（如 URL、日志行），强制拉宽容器 -
box-sizing: content-box下，padding仍占空间，width: 0后视觉上仍有厚度
用 flex-basis 替代 width 的实操要点
核心是让侧边栏参与 flex 分配，同时允许它被压缩到极小值：
- 父容器必须设
display: flex和flex-direction: row - 侧边栏样式：
flex-basis: var(--sidebar-width, 240px); min-width: 0; overflow: hidden; - 主内容区设
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 侧边栏和主内容区都加
min-width: 0，防止单词/URL 撑破布局 - JS 控制只改一个变量：
document.documentElement.style.setProperty('--sidebar-width', '60px');
折叠动画卡住？先检查这几点
即使写了 transition: flex-basis 0.3s ease，动画也可能静止不动：
立即学习“前端免费学习笔记（深入）”；
- 父容器没显式声明
flex-wrap: nowrap（虽是默认值，但某些浏览器需明确写出） - 侧边栏内部用了
display: flex或display: grid的子项，且未设min-width: 0，子项自身抗压缩 - 过渡属性漏了
overflow：transition: flex-basis 0.3s ease, overflow 0.3s ease，否则收起瞬间会闪出内容 - 用了
calc(var(--sidebar-width) - 180px)这类计算式——部分浏览器对 calc 中变量动画支持不稳定，直接设具体值更稳
移动端或全隐藏场景该用 transform
如果目标是彻底移出视口（比如汉堡菜单抽屉），flex-basis 不再适用：
- 改用
transform: translateX(-100%)+overflow-x: hidden在父容器上 - 不占文档流，不影响主内容区 flex 分配，也不依赖
min-width: 0 - 动画性能更好（GPU 加速），尤其适合低配设备
- 注意：此时主内容区不能靠 flex 自动填满，得用
margin-left或padding-left手动腾位置
真正容易被忽略的是：折叠状态不是“要不要显示”，而是“怎么保访问性”。设 display: none 或 width: 0 会让屏幕阅读器跳过、键盘焦点丢失。用 flex-basis + overflow: hidden 才是既收得干净，又不丢语义的解法。
