最稳妥方案是父容器设 display: flex，左侧用 flex: 0 0 200px 固定宽度，右侧用 flex: 1 自适应剩余空间；Grid 则用 grid-template-columns: 200px 1fr 更直观，且支持多列扩展与响应式。
flex 实现左固定右自适应：用 flex 和 flex-shrink
最稳妥的方案是父容器设 display: flex，左侧项设固定宽度（如 width: 200px），右侧项用 flex: 1 占满剩余空间。关键点在于：右侧不能设 width 或 flex-basis 初始值过大，否则会挤压或溢出。
常见错误是给右侧加 width: 100%，这会导致它无视 flex 布局规则、强行撑满父容器，左侧被挤出视口。
- 左侧固定宽：可直接写
width: 200px，或用flex: 0 0 200px（即不伸缩、不收缩、基准宽 200px） - 右侧自适应：必须用
flex: 1（等价于flex: 1 1 0），让浏览器按剩余空间分配 - 若右侧内容超长需换行，记得加
word-break: break-word或overflow-wrap: break-word
.container {
display: flex;
}
.left {
flex: 0 0 200px; /* 固定 200px，不伸缩不收缩 */
}
.right {
flex: 1; /* 自适应剩余所有宽度 */
}grid 实现左固定右自适应：用 grid-template-columns 显式定义
Grid 更直观——直接在父容器用 grid-template-columns 定义两列：200px 1fr。其中 200px 是固定列，1fr 表示“剩余空间的 1 份”，天然自适应。
注意不要混用 fr 和百分比（如 200px 100%），后者会让第二列尝试占满整个父容器宽度，导致布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 支持多列扩展：比如三列「左固定 + 中自适应 + 右固定」可写
200px 1fr 120px - 若需响应式，在媒体查询里改
grid-template-columns即可，无需改 HTML 结构 - IE 不支持
fr单位，如需兼容 IE11，得回退到flex方案或用minmax()配合auto
.container {
display: grid;
grid-template-columns: 200px 1fr;
}
.left { }
.right { }当右侧要设置最小宽度时：min-width 和 flex-basis 的冲突怎么解
如果右侧需要「至少 300px，但不超过可用空间」，直接加 min-width: 300px 在 flex: 1 元素上是有效的；但若同时设了 flex-basis: 0（比如写了 flex: 1 1 0），min-width 仍会生效——因为 min-width 优先级高于 flex-basis。
容易踩的坑是误以为 flex-basis 为 0 就能完全由 min-width 控制尺寸，其实它只影响初始计算，最终尺寸仍受 min-width / max-width 约束。
- 推荐写法：
flex: 1; min-width: 300px;（简洁且语义清晰） - 避免写
flex: 1 1 300px再加min-width，易造成理解混乱和意外收缩 - Grid 下同理：用
minmax(300px, 1fr)替代1fr，更精准表达“最小 300px，最大占满”
为什么不用 float 或 position: absolute
这两类方案现在基本属于技术债。浮动需要清除、父容器高度塌陷；绝对定位脱离文档流，右侧无法自然感知左侧宽度，响应式维护成本高。
尤其在现代框架（React/Vue）中，组件嵌套深、动态渲染频繁，float 容易引发意外交互问题（比如 z-index 层叠异常、滚动容器内定位偏移）。
-
float：已从 CSS 规范中移出「布局用途」，仅保留文本环绕语义 -
position: absolute：必须知道左侧精确宽度才能设left，无法适配主题切换或字体缩放 - Flex/Grid 是 W3C 推荐的二维布局方案，浏览器支持度在 Chrome/Firefox/Safari/Edge 16+ 均稳定
实际项目里，flex 更适合简单两栏，grid 更适合未来可能增加中间栏、或需要对齐多行多列的场景。别为了“看起来高级”硬套 grid，也别因“老项目用了 float”就拒绝重构——真正卡住进度的，往往是没及时清理掉那些靠 margin-left 硬凑出来的“自适应”。
