侧边栏写了width: 200px仍被压缩，是因为flex容器中子项默认flex-shrink: 1，需显式设flex-shrink: 0或flex: 0 0 200px锁定宽度；仅设width无效，且ie11需同时声明width和flex-basis。
侧边栏写了width: 200px还是被压缩？因为flex-shrink默认是1
Flex容器里，width只是“建议尺寸”，真正起效的是弹性行为。子项默认 flex-shrink: 1，只要容器宽度不够，它就会主动缩小——哪怕你写了width: 200px，也拦不住。这不是bug，是Flex的默认分配逻辑。
解决方法不是反复调width，而是关掉它的收缩权：
-
flex-shrink: 0是最直接写法，明确告诉浏览器“别动我宽度” - 更推荐用简写：
flex: 0 0 200px（flex-grow为0、flex-shrink为0、flex-basis为200px） - 避免只写
flex: 0 200px——浏览器会把200px当成flex-shrink值，实际变成flex-shrink: 200，反而压得更狠
为什么加了flex-shrink: 0还是被挤扁？检查父容器和嵌套链路
flex-shrink: 0 只管“自己不缩”，不管“别人缩完后把你挤进窄缝里”。常见真凶是上层容器本身被压缩了：
- 侧边栏设了
flex-shrink: 0，但它的父容器是.main，而.main被设为flex: 1放在更外层 Flex 中 → 外层一缩，.main先塌，侧边栏跟着被框进变窄的空间 - 祖先元素设置了
overflow: hidden或min-width: 0，间接影响渲染边界 - IE11 下必须同时写
width: 200px和flex-basis: 200px，否则不认
图片或文字内容导致侧边栏变形？需要min-width配合
纯 flex-shrink: 0 能防压缩，但挡不住内容自身撑开或塌陷。比如图片默认有最小内容宽度，文字会换行：
- 对图片加
min-width: 0+flex-shrink: 0+max-width: 100%，三者缺一不可 - 含文字的侧边栏，若想防止换行，补一句
white-space: nowrap - 若要守住底线宽度（比如死守200px），必须加
min-width: 200px；若只想解除内容最小宽度限制，用min-width: 0更轻量 -
box-sizing: border-box下，min-width包含 padding 和 border，注意计算
响应式下flex-shrink: 0容易引发横向滚动，怎么收场？
固定宽度侧边栏在小屏上最危险：所有 flex-shrink: 0 元素加起来超了 viewport 宽度，浏览器不会自动换行，只会加横向滚动条。
这不是属性错了，是布局意图没对齐。应对方式很务实：
- 小屏断点里，把侧边栏从
flex-shrink: 0切成flex: 0 1 auto，让它能缩 - 或者干脆切布局方向：
flex-direction: column，让侧边栏堆到上下 - 别依赖
flex-shrink: 0做响应式兜底，它本质是个“刚性锁”，柔性场景得靠媒体查询+重置
真正难的从来不是写对那一行flex-shrink: 0，而是判断它该不该存在、在哪一层生效、以及什么时候该悄悄把它拿掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
