最简稳方案是display: flex，父容器设flex，左侧定宽，右侧用flex: 1；须避坑：勿加width: 100%、必加min-width: 0、清除float/absolute等干扰样式。
直接用 display: flex 是当前最稳、最简、最推荐的方案，无需 hack、不依赖 DOM 顺序、天然支持等高，现代浏览器全覆盖。
用 display: flex 实现时右侧溢出或换行
这是最常踩的坑：右侧元素加了 width: 100% 或没设 min-width: 0，导致内容过长时撑破布局或强制换行。
- 右侧必须用
flex: 1（或flex-grow: 1），而不是width: 100% - 若右侧含图片、长单词、
textarea等可能溢出的内容，务必加min-width: 0 - 确保父容器没设置
float、position: absolute或display: inline-block—— 这些会破坏 flex 上下文 - 左侧无需写
flex-shrink: 0（默认就是 0），但内容超长时显式加上更保险
用 display: grid 时右侧不占满剩余空间
常见错误是只写了 display: grid 却漏掉列定义，结果两个子元素叠在第一列里，看起来像“没生效”。
- 必须显式声明
grid-template-columns: 200px 1fr（左侧固定 200px，右侧弹性占满） - 避免误用
1fr 1fr或auto 1fr——前者让左侧也参与弹性分配，后者在内容窄时可能导致左侧收缩 - 留间隙优先用
gap: 16px，别在 item 上写margin，grid 中 margin 行为不稳定 - IE 10–11 不支持
1fr，需回退到grid-template-columns: 200px auto并配合ms-grid-columns
仍需兼容 IE9 及以下时的替代方案
Flex 和 Grid 在这些老版本中完全不可用，只能靠传统手段，但要注意 DOM 顺序和清除浮动问题。
-
float + overflow: hidden：左侧float: left; width: 200px，右侧overflow: hidden触发 BFC，不设宽度即可自适应 - DOM 顺序必须是左侧在前、右侧在后；若结构反了（如 SEO 要求主内容优先），此法失效
-
position: absolute：父容器position: relative，左侧position: absolute; left: 0，右侧用margin-left: 200px占位——但高度无法自动同步，需 JS 或伪等高 hack - 慎用
calc(100% - 200px)：IE9 支持，但需确保单位一致（如不能混用px和em），且父容器宽度必须可计算（不能是fit-content）
真正容易被忽略的是：所有方案都默认要求父容器宽度明确（比如没设 width 时依赖其包含块），如果父容器本身是 display: inline-block 或被 float 影响，flex/grid 都会静默失效——建议先检查父容器的 computed display 和 width 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
