根本原因是子菜单容器未参与Flex流程或侧边栏缺少min-height:0；需确保.sidebar设flex-column且所有直接子容器加min-height:0，ul禁用height/max-height，用overflow:hidden+max-height过渡动画，并统一flex-basis单位避免跳变。
侧边栏嵌套子菜单时，为什么点击展开后布局错位？
根本原因是子菜单容器没走 Flex 流程，或者父级 .sidebar 缺少 min-height: 0。Flex 子项默认 min-height: auto，一旦内部有 ul 或 div 堆叠，它就会撑高整个侧边栏，导致主内容区被顶下去、滚动失效。
必须确保：
-
.sidebar自身设display: flex; flex-direction: column;，且加min-height: 0 - 所有直接子容器（比如
.menu-group、.submenu）也得设min-height: 0，否则链路一环没放开，整个就卡住 - 子菜单
ul不要设height或max-height，用overflow: hidden+transition: max-height配合 JS 切类更稳
折叠/展开动画不平滑，flex-basis 改了但宽度跳变？
这是最常踩的坑：flex-basis 从 240px → 64px 动画跳变，不是因为没写 transition，而是初始值用了 auto 或单位混用。
正确做法是：
- 初始状态显式写死：
.sidebar { flex-basis: 240px; }，不能留空 - 目标状态用同单位数值：
.sidebar-collapsed { flex-basis: 64px; }，禁用content、fit-content - 必须加
min-width: 0—— 否则浏览器按“文字可读”保护机制强行撑宽 - 配套加
overflow-x: hidden和text-overflow: ellipsis，防文本溢出破坏动画终点
多级菜单在 IE11 中高度塌陷或无法滚动？
IE11 的 flex: 1 解析为 flex: 1 0 auto，导致主区域高度归零；同时它不支持 order，移动端重排逻辑直接失效。
绕过方案很明确：
- 侧边栏固定宽不用
flex简写，直接写flex: 0 0 240px - 主内容区必须用全量写法：
flex: 1 1 0，不能简写为flex: 1 - 所有涉及伸缩的容器都加
min-height: 0，包括.sidebar、.content、以及它们的直接子容器 - IE11 不支持
order，移动端降级用flex-direction: column-reverse+margin-top模拟顺序调整
菜单图标和文字对不齐，align-items 失效？
很多人在 .sidebar 上设 align-items: center，发现图标和文字还是上下偏移——这是因为 align-items 控制的是所有子项在交叉轴（这里是垂直方向）上的对齐，而图标和文字本身是行内元素，基线不同。
真正有效的是：
- 给菜单项（如
.menu-item）设display: flex; align-items: center; - 图标用
vertical-align: middle或设height+line-height对齐文字 - 避免在
.sidebar容器上滥用justify-content—— 它只管水平分布，对两栏布局基本没用 - 如果菜单项含 badge 或角标，记得给它们加
align-self: flex-start，防止被center拉偏
复杂点在于：多级菜单不是单个 CSS 规则能搞定的事，它是一整条「flex 容器 → 子项 → 子项的子项」收缩链，漏掉任意一环的 min-width: 0 或 min-height: 0，都会在某个设备或状态下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
