最稳解法是用display: flex且右栏设flex: 1；calc(100%-250px)仅静态计算、不响应DOM变化，易因菜单折叠、padding、transform等失效，且存在兼容性与语法（需空格）问题。
直接用 display: flex，右栏设 flex: 1——这是当前最稳、最不易出错的解法。
为什么不用 calc(100% - 250px)
它只算一次，不响应 DOM 变化：菜单折叠/展开、动态插入内容、嵌套 padding 或 transform 都会让计算失效。常见表现是右侧突然溢出或塌缩。
-
calc(100% - 250px)中-两侧必须有空格，写成calc(100%-250px)浏览器直接忽略，退回到width: auto - 百分比始终相对于包含块，而父级的
padding、border、transform都会改变包含块，导致结果偏差 - IE11 不支持
calc()混用单位（如50% + 1rem），Safari 13.1 前不支持grid-template-columns: calc()
display: flex 的关键写法和易错点
父容器必须显式设 display: flex，左栏用 flex: 0 0 250px（不是仅 width: 250px），右栏用 flex: 1。
- 漏掉父容器的
display: flex，而只给子项设flex属性，完全无效 - 左栏若只写
width: 250px而不加flex: 0 0 250px，当内容超宽时会被压缩或换行，破坏“固定”语义 - 右栏若需最小宽度保护，加
min-width: 300px；否则窄屏下可能被压得看不见 - 长英文/数字无空格时溢出？在右栏加
word-break: break-word或overflow-wrap: break-word
高度不对齐不是 bug，是默认行为
左栏不会自动随右栏拉高，哪怕父容器是 display: flex——除非你没动过 align-items（它的默认值 stretch 确实能让子项等高，但某些 CSS 重置库会覆盖它）。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否被其他样式设置了
align-items: flex-start或类似值 - 右栏内容高度决定整体容器高度，左栏背景色断层？这不是布局失败，而是你没意识到它们本就不在同一个 BFC 或轨道里
- 真要等高，优先确认
align-items: stretch是否生效；失效时再考虑display: grid或显式设height: 100%
真正麻烦的从来不是“怎么让右边自适应”，而是“怎么让自适应不被折叠菜单、字体加载、动态插入内容悄悄破坏”。flex: 1 提供的是弹性响应能力，calc() 只提供静态快照——后者在现代项目里，基本只该出现在降级兜底逻辑里。
