优先选 flex 布局，因其能动态分配剩余空间；calc() 仅静态计算，需手动处理父容器宽度上下文、vw/%差异及 ie 兼容性问题。
Flex 布局能真正“分配剩余空间”，calc() 只是静态计算宽度——选哪个不看流行度，看你的左侧是否脱离文档流、内容是否可控、浏览器兼容要求是否苛刻。
flex: 1 右侧不撑满？先查这三件事
不是 flex: 1 失效，而是它没东西可分。常见现象：右侧窄得只剩一条缝，或和左侧一样宽。
-
.container必须有display: flex，且不能漏掉flex-direction: row（虽默认，但显式写更稳） - 左侧不能只写
width: 240px，得用flex: 0 0 240px—— 否则小屏下会被flex-shrink压缩，反挤占右侧空间 - 父容器自身得有明确主轴宽度来源，比如
width: 100%、max-width: 1200px或width: 100vw；否则“剩余空间”为 0，flex: 1直接闲置
calc() 里写 100% 还是 100vw？
写 calc(100vw - 240px) 更可靠。100% 是相对父容器算的，而固定定位的左侧栏常让父容器“感知不到”它占的空间，导致右侧算出来反而偏窄。
- 若左侧用
position: fixed，右侧必须配margin-left: 240px+width: calc(100vw - 240px)，缺一不可 - 别在
.main-content上直接写width: calc(100% - 240px)，尤其当它嵌套在 Bootstrap 的.container（带padding或max-width）里时，结果必错 - IE9+ 支持
calc()，但旧版 IE 对vw单位支持不稳定；如需兼容 IE11，优先测calc(100% - 240px)+ 显式父宽
右侧内容一长就溢出？min-width: 0 不是可选项
Flex 默认会让子项最小宽度不低于其内容自然宽（比如长 URL、未换行文本、嵌套 flex 容器），min-width: 0 才是让它“敢收缩”的开关。
-
.main { flex: 1; min-width: 0; }必须成对出现，单独flex: 1在 Safari 14–15、iOS WebView 下大概率失效 - 仅靠
min-width: 0不够：长单词或 URL 还得补overflow-wrap: break-word，否则仍会横向撑破 - 右侧若有
border或padding，必须加box-sizing: border-box，否则 Safari 把边框当额外宽度，算出的“剩余空间”偏小
响应式收起左侧栏，别用 display: none
直接隐藏会触发重排、焦点丢失、动画卡顿。更平滑的做法是让左侧“视觉上消失但仍在 Flex 流中”。
- 小屏下改
.sidebar { flex: 0 0 0; overflow: hidden; transform: translateX(-100%); } - 右侧保持
flex: 1，它会自动占满全宽，无需额外调整 - 过渡只加在
transform和opacity上，不触发 layout；避免给.sidebar加height: 0或visibility: hidden，它们会干扰 Flex 分配逻辑
真正卡住布局的，从来不是“怎么写”，而是右侧内容类型不确定时——比如用户粘贴了超长 URL、插入了未设 table-layout: fixed 的表格、或嵌套了另一个 flex 容器。这些情况，min-width: 0 是底线，overflow-wrap 和 box-sizing 是补丁，而显式定义父容器宽度上下文，才是 Flex 能工作的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
