flex-grow: 1 失效主因是父容器未设 display: flex 或左侧元素未用 flex-shrink: 0 锁定尺寸，导致无剩余空间可分配；右侧应优先用 flex: 1 并配 min-width: 0 和 box-sizing: border-box。
为什么只写 flex-grow: 1 右侧就是不撑满？
因为 flex-grow 不是“让元素变宽”，而是“把主轴剩余空间按比例分给它”。如果父容器没设 display: flex，或者左侧元素没锁死尺寸，剩余空间就不存在——flex-grow: 1 直接失效。
常见错误现象：.main { flex-grow: 1; } 单独写，但右侧还是窄得可怜，甚至和左侧一样宽。这时大概率是：.container 缺少 display: flex，或左侧用了 width: 200px 却没配 flex-shrink: 0，导致它被压缩后又挤占了本该属于右侧的空间。
- 必须确保父容器有
display: flex和flex-direction: row（默认值，但显式写上更稳） - 左侧固定宽元素不能只靠
width，得用flex: 0 0 200px或至少flex-shrink: 0 - 右侧设
flex-grow: 1前，先确认父容器宽度来源是否明确（比如width: 100%、max-width: 1200px，或来自视口如100vw）
flex: 0 0 200px 和 width: 200px 差在哪？
差在是否参与 Flex 分配逻辑。width 是盒模型层的初始尺寸，在 Flex 容器里会被 flex-shrink 悄悄压缩；而 flex: 0 0 200px 显式声明“不放大、不缩小、基准就是 200px”，真正守住“固定”二字。
实际踩坑点：小屏下左侧菜单文字换行、图标错位、甚至整个栏被压成一条细线——八成是用了 width 却漏了 flex-shrink: 0。
- 推荐写法：
.sidebar { flex: 0 0 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - 避免混用：
width和flex-basis同时存在可能触发浏览器计算冲突 - 响应式切换时，改
flex值比改width更安全，例如用@media (max-width: 768px) { .sidebar { flex: 0 0 60px; } }
flex: 1 比 flex-grow: 1 更靠谱？
是的。因为 flex: 1 展开是 flex: 1 1 0，其中 flex-basis: 0 让它从零开始分配剩余空间，不会受内容原始宽度干扰；而单独写 flex-grow: 1 时，flex-basis 默认是 auto，若右侧内容本身很宽（比如长 URL、未设 min-width: 0 的嵌套 flex 容器），就会撑大自身，导致右侧“自适应”变成“自膨胀”。
尤其 Safari 14–15 下，右侧若有 border 或 padding 且没设 box-sizing: border-box，flex-grow: 1 算出来的剩余空间会偏小，右侧直接变窄甚至消失。
- 稳妥写法：
.main { flex: 1; box-sizing: border-box; min-width: 0; } - 若右侧需最小宽度约束（如不能窄于 300px），必须额外加
min-width: 300px，flex-grow本身不认这个 - IE11 中慎用
flex-basis: auto，优先用具体值，例如flex: 1 1 300px
后台布局中右侧滚动条出不来？检查这三点
后台页面常要求左侧菜单固定、右侧区域独立滚动——但很多人加了 overflow-y: auto 还是整页滚。根本原因不是样式没加，而是 flex 项目的默认行为把它“拉满”了。
Flex 容器默认 align-items: stretch，会让子项高度拉到容器最大值；而右侧若没明确高度上限，overflow 就无效。
- 父容器必须有明确高度来源，例如
height: 100vh或由上层设min-height: 100vh - 右侧必须加
min-height: 0或overflow: hidden，切断stretch行为 - 右侧内部禁止用
height: 100%嵌套，改用flex-direction: column+flex: 1分配内部区域
最易忽略的是高度链断裂：只要上层某个祖先没设高，100% 就一路失效，flex-grow 和 overflow 全部罢工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
