flex: 1 不生效的根本原因是父容器未设置 display: flex，导致子元素退化为普通块级流；左栏需用 flex: 0 0 250px 并配合 box-sizing: border-box；bfc 清除浮动无法实现自适应布局；grid 下需明确定义 grid-template-columns 和父容器高度。
flex: 1 不生效，先查父容器有没有 display: flex
右侧没撑满，90% 是因为父容器根本没开启 Flex 上下文。只写 flex: 1 在子元素上，而父级没设 display: flex，就等于白写——它会退化成普通块级流，flex: 1 直接被忽略。
常见错误：.container { width: 100%; } 看起来像“容器”，但没加 display: flex，右侧元素实际宽度仍是 auto，内容少时就缩成一团。
- 必须显式写
display: flex到直接包裹左右栏的父容器上 - 别指望祖先元素（比如
body或某个 wrapper）顺带生效——Flex 不会继承 - 用浏览器开发者工具检查 computed styles，确认该父容器的
display确实是flex
左侧用了 width: 250px，但右侧还是被挤窄
只设 width: 250px 的左栏，在 Flex 容器里默认可收缩（flex-shrink: 1），尤其当右栏内容短、或父容器变窄时，左栏会被压缩，导致实际宽度小于 250px，右侧计算出的“剩余空间”就变小了。
更糟的是，如果左栏有 padding 或 border，又没设 box-sizing: border-box，那它的总宽就超过 250px，右侧直接溢出或出现横向滚动条。
- 左栏改用
flex: 0 0 250px，明确禁用伸缩、固定基础宽度 - 必须同步加
box-sizing: border-box，否则padding和border会额外加宽 - 别用
calc(100% - 250px)代替——它不响应 DOM 变化，菜单折叠、动态插入内容后立刻失效
BFC 清除浮动不是万能解，而且现在不该用
看到 overflow: hidden 或 ::after { clear: both } 就以为能救布局？那是 float 时代的补丁，不是现代解法。BFC 清除浮动只能防止父容器塌陷，但无法让右侧“自适应”——你得手动算 margin-left 或靠 display: table-cell 这类过时机制，极易被 padding、border、zoom 等干扰。
尤其在响应式场景下：窗口缩小时，浮动左栏可能换行，右栏直接掉到下一行；IE 以外的现代浏览器对 BFC 边界计算更严格，一个没封住的 border 就会让右栏错位。
- 新项目里，
float布局基本等于技术债预警，不是不能跑，而是改起来会骂人 - 真要兼容 IE11，降级用
display: flex，别 fallback 到 float - BFC 本身不分配空间，它只管“包含”和“隔离”，撑不满的问题它不管
Grid 方案下右侧“看不见”，往往缺 height 或轨道定义
写了 display: grid 却发现右侧栏没显示？大概率是父容器没高度，或者漏了列轨道声明。Grid 默认单列，所有子项全塞进第一列，看着像“叠在一起”。
另外，grid-template-columns: 1fr 1fr 看似分两栏，但如果父容器没设 height 或内容太短，整个网格区域就塌缩，右侧视觉上“消失”。
- 必须写
grid-template-columns: 250px 1fr，其中250px是固定列，1fr表示剩余空间 - 父容器需有明确高度来源，比如
height: 100vh或min-height: 100vh - 别混用
250px 100%—— 百分比会让第二列尝试占满整个父容器，直接把左栏挤出视口
真正卡住右侧撑不满的，从来不是“哪个属性写错了”，而是几个隐式约束同时失效：父容器宽度来源不明、盒模型不一致、内容自带抗收缩特性（比如长 URL）、小屏下视口上下文丢失。Flex 和 Grid 都只负责分配空间，不帮你兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
