用 display: flex 最稳，display: grid 更直观，但两者都必须显式定义空间归属；flex 需设左侧 flex: 0 0 200px、右侧 flex: 1 且 min-width: 0；grid 需写 grid-template-columns: 200px 1fr；均须注意盒模型、视口宽度及内容溢出处理。
直接给结论：用 display: flex 最稳，display: grid 更直观，但两者都必须显式定义空间归属，不能只靠“右侧写 width: 100%”这种老思路。
flex 实现时为什么右侧不占满剩余空间
不是语法错了，而是没锁死左侧、没释放右侧的收缩边界。常见现象是右侧窄得离谱，或内容一长就横向溢出。
-
flex: 0 0 200px比width: 200px更可靠——前者明确禁止伸缩，后者在 flex 容器里仍可能被flex-shrink压缩 - 右侧必须用
flex: 1（等价于flex: 1 1 0），不能只写flex-grow: 1；否则flex-basis: auto会让它从内容宽度起步，失去“从零分配”的能力 - 右侧要加
min-width: 0，否则长 URL、未换行文本、嵌套 flex 容器会强制撑开自身，拒绝收缩 - 父容器得有明确主轴宽度来源，比如
width: 100%或max-width: 100vw；否则“剩余空间”算不出来，flex: 1就没东西可分
grid 实现时为什么两列堆在一起
写了 display: grid 却没设 grid-template-columns，Grid 就默认单列布局，所有子项全塞进第一列。
- 必须显式写
grid-template-columns: 200px 1fr，其中200px是固定列，1fr是剩余空间的 1 份 - 别混用
200px 100%——百分比会让第二列尝试占满整个父容器，直接把左侧挤出视口 - 右侧若含
<table>，记得加 <code>table-layout: fixed和width: 100%，否则表格默认按内容宽撑列 - 小屏下 Firefox 对
1fr收缩更激进，可改用minmax(0, 1fr)防塌陷 - 右侧必须加
box-sizing: border-box，否则 Safari 把padding和border当作额外宽度，导致“剩余空间”计算偏小 - 移动端父容器若没设
width: 100%或100vw，flex: 1在小屏下大概率失效 - 响应式收起左侧栏时，别用
display: none——会触发重排、焦点丢失；推荐用flex-basis: 0+overflow: hidden+transform: translateX(-100%) - 右侧若有长单词或 URL，补上
overflow-wrap: break-word，光靠min-width: 0不够
Safari 14–15 和移动端特别容易翻车的点
这些版本对 box model 计算更严格，一个 border 或 padding 就可能让右侧变窄甚至消失。
真正卡住布局的，从来不是“怎么写”，而是“哪些隐式约束没满足”。Flex 和 Grid 都不自动处理内容宽度、盒模型偏差、视口上下文缺失这些问题——它们只负责分配空间，不负责帮你兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
