侧边栏被压缩是因为 flex-shrink 默认为1，需设 flex-shrink: 0 或使用 flex: 0 0 200px；ie11需同时设 width 和 flex-basis；内容溢出需加 min-width: 0、overflow: hidden 等约束。
flex-basis设成固定值后侧边栏还是被压缩？
因为 flex-shrink 默认是 1，即使写了 flex-basis: 200px，只要容器宽度不够，它照样缩。这不是 flex-basis 失效，而是弹性项主动“让出空间”了。
- 必须显式设置
flex-shrink: 0，才能锁死宽度 -
flex: 0 0 200px是最简写法（flex-grow0、flex-shrink0、flex-basis200px） - 别只写
flex-basis单独属性，容易漏掉收缩行为 - 如果侧边栏里有长文本或图片，还得加
overflow: hidden或min-width: 0防止内容撑开
主内容区怎么自适应又不换行？
主区用 flex: 1 最稳妥，但要注意它等价于 flex: 1 1 auto —— 意味着它既能放大也能缩小。如果内容极少，可能被压扁得看不见。
- 更安全的写法是
flex: 1 0 0：允许放大，禁止缩小，基准宽度为 0，把所有剩余空间都占满 - 避免对主区设
width或min-width，会和 flex 计算冲突 - 若主区内部有表格或 inline 元素，记得加
min-width: 0，否则 flex 不会收缩它们
IE11里flex-basis固定宽度失效？
IE11 对 flex-basis 的解析有 bug：当值是带单位的数字（如 200px）时，有时会当成 auto 处理，导致侧边栏不固定。
- 兼容写法：同时声明
width: 200px和flex-basis: 200px，IE11 会 fallback 到width - 慎用百分比
flex-basis，IE11 在某些嵌套场景下计算错父容器宽度 - 别依赖
flex: 0 0 200px的简写，IE11 对简写解析不稳定，拆成三个独立属性更稳
侧边栏固定但内容溢出怎么办？
固定宽度只是框住了容器，里面文字、图片、按钮仍可能突破边界，尤其在小屏或字体放大的情况下。
- 给侧边栏根元素加
min-width: 0，确保 flex 容器能正确截断子项 - 长文本用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 图片加
max-width: 100%; height: auto，防止撑破容器 - 如果用了
display: flex布局的子项，也要检查它的flex-shrink是否为 0
真正难的不是设宽，是让整个 flex 链路上每个环节都放弃“撑开”的冲动 —— 从侧边栏本身，到它里面的文字、图片、甚至子 flex 容器，都得一个个确认收缩行为是否关闭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
