flex: 0 0 width 与 flex: 1 是 flex 简写，前者固定宽度不缩放，后者等比放大并吃掉剩余空间；二者需配合 display: flex 使用，且主内容需设 overflow-y: auto 和 min-height: 0 才能正常滚动。
flex: 0 0 width 和 flex: 1 是什么关系
它们是 flex 的简写，不是独立属性。flex: 0 0 width 表示「不放大、不缩小、基准宽度为 width」；flex: 1 等价于 flex: 1 1 0，即「等比放大、可缩小、初始内容宽度为 0」——这很关键：它会让该区域从 0 开始撑开，吃掉剩余空间。
常见错误是写成 flex: 1 1 auto 或漏掉第二个值，结果侧边栏被压缩，主内容没占满。
-
flex: 0 0 240px适合固定宽度侧边栏（如导航），240px 不会被拉伸也不会收缩 -
flex: 1必须用在兄弟元素上，且父容器display: flex，否则无效 - 如果主内容里有
width: 100%或max-width，可能和 flex 冲突，优先删掉
为什么侧边栏有时还是被挤压或换行
根本原因常是父容器没设高度或未处理内部溢出。Flex 布局默认按内容高度撑开，但侧边栏若含长文本、图片或绝对定位元素，容易突破容器边界。
- 给父容器加
min-height: 100vh，避免高度塌陷 - 侧边栏内文字用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis防止撑宽 - 避免在侧边栏子元素上写
flex: 1，会干扰外层布局流 - 检查是否有
box-sizing: border-box缺失——padding/margin 算进宽高后，240px 可能实际超了
IE11 下 flex: 0 0 width 不生效怎么办
IE11 对 flex 简写支持不全，尤其 flex: 0 0 240px 容易被忽略，降级为 flex: 0 0 auto，导致宽度失控。
- 显式写全三个值：
flex-grow: 0; flex-shrink: 0; flex-basis: 240px - 给侧边栏加
width: 240px作为 IE11 回退（现代浏览器会以 flex-basis 为准） - 避免在 flex 容器上用
align-items: stretch+ 子项height: 100%，IE11 渲染不稳定
用 flex: 1 后主内容滚动条消失或错位
这是最隐蔽的问题：当主内容区域需要内部滚动（比如列表很长），但父 flex 容器没约束高度，flex: 1 会让它无限撑高，滚动条出不来。
- 给主内容区域加
overflow-y: auto，并确保其父 flex 容器有明确高度（如height: calc(100vh - 60px)） - 不要依赖
height: 100%，改用min-height: 0—— 这是 flex 子项获得滚动能力的关键前提 - Chrome/Firefox 中若仍异常，检查是否启用了
contain: layout或transform，它们会创建新的层叠上下文并影响 flex 计算
真正麻烦的不是写法本身，而是 flex 的“自动”行为会掩盖父容器的高度来源。一旦某层没设高，flex: 1 就只能猜——而它通常猜错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
