侧边栏被内容撑开本质是盒模型、父容器约束与溢出处理共同失控；需设flex-shrink: 0、min-width: 0或overflow: hidden，配合word-break: break-word、max-width: 100%等控制内容。
侧边栏被内容撑开，本质是它没真正“固定住”——不是宽度设了 200px 就万事大吉，而是它的盒模型行为、父容器约束、以及内容溢出处理共同失控了。
flex 布局中侧边栏宽度失效的常见原因
用 display: flex 时，即使给侧边栏写了 width: 200px，它仍可能被内部长单词、未换行的 URL 或图片撑宽。这是因为默认的 flex-shrink: 1 和 min-width: auto 共同起效，浏览器会优先压缩主内容区，而不是守住侧边栏边界。
- 必须显式设置
flex-shrink: 0防止压缩（但还不够） - 必须加
min-width: 0或overflow: hidden才能切断内容对宽度的“反向拉伸” - 如果侧边栏里有
img，记得加max-width: 100%；有长文本，加word-break: break-word
float + margin 方案下 overflow:hidden 失效怎么办
很多人照着教程写 .sidebar { float: left; width: 200px } 和 .content { margin-left: 200px }，再给父容器加 overflow: hidden，结果发现侧边栏还是被撑开——问题往往出在：父容器没形成 BFC，或者子元素用了 position: absolute / transform 等脱离文档流的属性，导致 overflow 失去裁剪能力。
- 确认父容器没有
transform、filter或will-change，这些会创建新的层叠上下文并干扰 BFC 触发 - 更稳妥的写法是改用
display: flow-root（现代浏览器支持良好），它比overflow: hidden更语义清晰且无副作用 - 若必须兼容老浏览器，可用
::after { content: ""; display: table; clear: both; }清除浮动，再配合width限制
position: fixed 侧边栏内容溢出时滚动异常
当用 position: fixed 固定侧边栏（比如导航栏），内容多于可视高度时，overflow-y: auto 可能不生效，或滚动条出现在整个页面而非侧边栏内部——这通常是因为父级设置了 height: 100vh，但没减去顶部导航栏等占用空间，导致计算高度不足。
- 避免直接写
height: 100vh，改用max-height: calc(100vh - 60px)（60px 是 header 高度） - 确保侧边栏本身有明确的
height或max-height，否则overflow不触发 - 如果用了
flex嵌套，检查中间层是否遗漏了flex-direction: column或flex: 1导致高度塌陷
真正卡住人的从来不是“怎么写”，而是“为什么写了没用”——侧边栏宽度守不住，90% 的情况是内容未受控、父容器 BFC 未真正建立、或固定定位时高度计算漏掉了其他绝对定位元素所占空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
