结论：calc()和flex不该混用——用flex:0 0 240px+flex:1即可干净解决，加calc()会引发缩放错位、响应式断裂及嵌套失效；主内容区必须设min-width:0防止溢出，侧边栏收起应改flex-basis而非width或display。
直接说结论：calc() 和 flex 不该混用——用 flex: 0 0 240px + flex: 1 就能干净解决，加 calc() 反而引入缩放错位、响应式断裂、嵌套容器失效等隐患。
为什么 calc(100% - 240px) 在 Flex 布局里是多余且危险的
常见错误是给主内容区写 width: calc(100% - 240px)，再套一层 display: flex。这会导致：
-
calc()计算的是父容器宽度，但 Flex 容器的子项宽度由flex属性主导，两者逻辑冲突 - 浏览器缩放（如 125%）、字体变化、多语言字符宽度差异会让
calc()结果失准，侧边栏和主区之间出现缝隙或重叠 - 当容器被嵌套在另一个
flex或grid中时，100%的基准可能不是你预期的容器，结果完全不可控 - 移动端横竖屏切换时，
calc()不会自动响应，而flex天然支持
flex: 0 0 240px 比 width: 240px 更可靠的原因
很多人写 .sidebar { width: 240px; }，以为就固定了——其实没锁住收缩行为。
- Flex 默认允许子项压缩（
flex-shrink: 1），哪怕写了width，小屏下仍会被压窄 -
flex: 0 0 240px显式声明：不放大（flex-grow: 0）、不缩小（flex-shrink: 0）、基准宽 240px（flex-basis: 240px） - 它还能防止侧栏内长文本或图片撑开宽度——
width是软约束，flex-basis在 Flex 上下文中才是硬锚点
主内容区必须加 min-width: 0 才不会溢出
这是最容易被忽略的一环。不加的话，主区会按内容最小宽度（比如一个超长 URL）强行撑开，导致横向滚动或侧栏被顶偏。
-
min-width: 0告诉浏览器：“即使内容再长，也别让我比剩余空间还宽” - 尤其当主区含
<pre class="brush:php;toolbar:false;"></pre>、<table>、未设 <code>word-break的文本时，这一行必不可少 - IE11 需额外补
width: 100%，否则flex: 1表现异常 -
display: none虽简单，但动画无法过渡（display 不可动画） -
width: 0不生效——因为 Flex 下宽度由flex-basis控制，得改flex-basis: 0 - 推荐方案：
.sidebar.collapsed { flex: 0 0 0; }+overflow: hidden+transition: flex-basis 0.3s ease - 同时主区保持
flex: 1，无需任何改动，自然占满全宽
响应式折叠侧边栏时，别只改 display 或 width
点击按钮收起侧边栏，常见错误是只设 display: none 或 width: 0。
真正难的不是写对那两行 flex，而是理解 flex-basis 和 min-width 在不同内容压力下的博弈关系——尤其是当侧栏有图标+文字、主区有表格+代码块时，边界情况才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
