flex: 0 0 200px比width: 200px更稳，因其明确禁用伸缩与收缩、固定基础宽度，且不受flex-shrink默认影响，配合box-sizing: border-box可避免padding/border导致的宽度溢出。
直接用 display: flex，别碰 float 和 position: absolute——前者写错一行就全乱，后者一动就要重算 margin，新手根本扛不住。
为什么 flex: 0 0 200px 比 width: 200px 更稳
只写 width: 200px 在 flex 容器里是危险操作：父容器变窄、内容变多时，左侧可能被压缩（尤其加了 padding 或 border），实际宽度远超预期。根本原因是 flex-shrink: 1 默认开启。
flex: 0 0 200px 明确禁用伸缩、禁用收缩、固定基础宽度，等价于三行声明：flex-grow: 0、flex-shrink: 0、flex-basis: 200px。它比单独设 width + flex-shrink: 0 更简洁、不易漏。
- 必须配合
box-sizing: border-box，否则padding和border会额外撑宽 - 如果左栏有
border: 2px solid #000和padding: 10px，但没设box-sizing，那真实占用宽度是200px + 2×2 + 2×10 = 224px，右侧就会被挤出或留白异常 - 右栏用
flex: 1即可，完全不用calc(100% - 200px)这类易错计算
grid-template-columns: 200px 1fr 看似简单，但有两个硬限制
这写法最干净，但不是所有项目都能用。它要求浏览器支持 Chrome 57+/Firefox 52+/Safari 10.1+；IE 全系不支持，Edge ≤15 也不行。
立即学习“前端免费学习笔记（深入）”；
另外，默认 align-items: stretch 会让左右栏等高——右栏内容少时，左栏会被拉长，视觉上像“上浮”，反而更难对齐。
- 别给子项再加
width: 100%，会和 grid 轨道冲突，导致横向滚动或错位 - 加间隙统一用
gap: 1rem，别用margin，否则破坏轨道计算 - 小屏适配别硬套
minmax(200px, 1fr) 1fr，手机上可能撑不开两列，得配合@media切单列
新手最容易踩的三个坑
这些细节不写进 CSS，布局当场失效，但错误信息又不报错，只能靠肉眼排查。
- 父容器漏写
display: flex或display: grid—— 子项样式再对也没用，它们还在文档流里按 block 默认方式排 - 右栏内容含长英文/数字无空格（如 API key、base64 字符串），默认会溢出容器，需加
word-break: break-word或overflow-wrap: break-word - 左栏不会自动随右栏拉高，这是正常行为，不是 bug。想等高，得确认父容器没覆盖掉默认的
align-items: stretch（某些 CSS 重置库会干掉它）
真正容易被忽略的是：所有方案中，左栏的 200px 都指 content-box 宽度。如果你用了 box-sizing: border-box，那 width: 200px 就已含 padding 和 border；若没设，就得手动把它们加进 margin-left 或 calc() 里——否则右侧永远对不齐。
