应使用flex: 0 0 240px替代width: 240px，因flex容器中width仅为建议值，需显式设置flex-shrink: 0禁用压缩，并配合box-sizing: border-box和min-width: 240px确保宽度稳定。
左侧树状菜单设固定宽度但被压缩？用 flex: 0 0 240px 替代 width: 240px
单纯写 width: 240px 在 flex 容器里是危险的：一旦父容器变窄、或右侧内容撑开，左栏可能被 flex-shrink 悄悄压缩——尤其它带 padding 或 border 时，实际宽度会超预期。
正确做法是显式禁用伸缩：
-
flex: 0 0 240px等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px - 必须配合
box-sizing: border-box，否则padding和border会额外加宽，导致右侧错位或横向滚动条出现 - 如果树状菜单含图标+文字+子节点折叠箭头，建议把
240px设为最小可用宽度，再加min-width: 240px防极端缩放
树状菜单需要固定定位（不随页面滚动）？position: fixed 后右侧内容怎么不被遮挡
直接给树状菜单加 position: fixed 会让它脱离文档流，右侧内容默认从左上角渲染，结果被盖住。
关键不是“固定菜单”，而是“告诉主内容：左边有块固定区域，你别占那儿”：
- 菜单层设
position: fixed; top: 0; left: 0; width: 240px; height: 100vh; - 主内容区（如
<main></main>）加margin-left: 240px;，值必须和菜单宽度严格一致 - 若主内容需滚动，确保
html, body { overflow-y: scroll; }，否则 Safari 中100vh可能失效 - 避免对主内容设
width: 100%——在 flex 布局下容易触发双重宽度计算，尤其嵌套容器时
响应式下树状菜单收起/展开，右侧内容如何平滑过渡
移动端常需隐藏树状菜单，但直接 display: none 会导致右侧内容突兀左移，体验割裂。
更稳妥的做法是用位移隐藏 + flex 自适应：
- 菜单加
transform: translateX(-100%); transition: transform 0.3s ease; - 主内容区不要依赖
margin-left，改用 flex 布局（父容器display: flex，菜单flex: 0 0 240px，主内容flex: 1） - JavaScript 控制开关时，优先切换 class（如
.sidebar-collapsed），而非直接操作style - 收起状态下，菜单仍保留在 DOM 中，只是不可见，这样右侧内容宽度能自然撑满
IE 兼容场景下不能用 Grid，但 Flex 又出高度错位？检查 align-items 和 min-height
Flex 默认 align-items: stretch，会让左右栏等高。但树状菜单通常比主内容短，强行拉伸会导致空白或滚动异常。
常见修复点：
- 父容器加
align-items: flex-start，让子项顶部对齐，各自按内容高度伸展 - 父容器设
min-height: 100vh，避免内容少时高度塌陷 - 树状菜单自身加
max-height: 100vh; overflow-y: auto;，只让它内部可滚动，不影响主内容全局滚动 - 若仍需 IE 支持，避免用
flex: 1，改用flex: 1 1 0（IE10+ 支持该写法）
树状菜单的“固定宽度”本质不是视觉约束，而是行为边界：它得稳住，不挤、不缩、不遮、不跳。所有样式选择都围绕这四点判断，而不是“看起来像固定了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
