侧边栏不收缩是因为主内容区未设为flex项且缺少min-width:0；应设父容器display:flex、主内容区flex:1和min-width:0，避免width:calc()在flex中失效。
calc() 里百分比和像素混用为什么侧边栏不收缩？
因为 calc() 中的百分比是相对于父容器计算的，而你写的 calc(100% - 240px) 在 flex 容器里没生效，本质是没把主内容区设为 flex 项——它只是个普通块元素，宽度仍按常规文档流走，calc() 被忽略或降级处理。
实操建议：
- 确保侧边栏和主内容区同级，且父容器设
display: flex - 给主内容区加
flex: 1或flex: 1 1 auto，让它真正“弹性占位” -
width: calc(100% - 240px)只在非 flex 场景下有效（比如 absolute 定位或 grid），flex 下优先走 flex 分配逻辑 - 如果硬要用
calc()，得配合min-width: 0防止 flex 项溢出导致计算失效
移动端侧边栏收起后，主内容区宽度没撑满怎么办？
常见现象：点击按钮隐藏侧边栏，主内容区还留着原来那条“空隙”，看着像卡住了。根本原因是 flex 子项默认 min-width: auto，会阻止它压缩到小于内容最小宽度（比如一段长单词、内联代码块）。
实操建议：
- 给主内容区加
min-width: 0，这是关键一步，否则flex: 1形同虚设 - 检查内部是否有未换行的长字符串，加
word-break: break-word或overflow-wrap: break-word - 避免对主内容区设固定
width或max-width，这会覆盖 flex 分配行为 - 用 Chrome DevTools 的 Layout 看板确认实际 computed width 是否随侧边栏状态变化
calc() 在 Safari iOS 上表现异常，侧边栏闪动或错位
Safari（尤其 iOS 15–16）对 calc() 在 flex + transition 组合下有渲染竞态问题：宽度计算完成前就开始动画，导致初始帧取值错误。不是 bug，是渲染管线调度差异。
实操建议：
- 避开在
transition属性中直接过渡width，改用transform: translateX()控制侧边栏显隐 - 如果必须用 width，给侧边栏加
will-change: width提前提示渲染层，但仅限触发前一刻设置，避免常驻开销 - 不要在
@media里嵌套calc()做响应式断点判断，Safari 对媒体查询内 calc 解析不稳定；先用 JS 检测视口，再切 class 控制样式 - 测试时禁用 transition，确认 layout 正确后再开启，排除是计算错误还是动画干扰
怎么让侧边栏在小屏自动折叠，又支持手势拖拽展开？
纯 CSS 实现不了拖拽，必须结合 JS 监听 touchmove。但核心原则是：CSS 负责状态样式，JS 只管坐标映射和 class 切换，不直接操作 style.width。
实操建议：
- 定义两个 class：
sidebar--collapsed（transform: translateX(-100%)）和sidebar--dragging（transition: none） - touchstart 记录起始 X，touchmove 根据 delta X 动态加
style.transform = translateX(${x}px)，但只在 -240px ~ 0 之间限制 - touchend 后判断偏移是否 > 120px，决定保留展开还是回弹，再移除
sidebar--dragging - 所有宽度相关逻辑交给
flex和min-width: 0，JS 不碰 width、calc 或 margin
侧边栏自适应真正的复杂点不在 calc 公式，而在 flex 行为、浏览器渲染机制、以及 touch 事件与 CSS 过渡的协同时机——这三个地方任意一个没对齐，就会出现“看起来写了，但就是不动”的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
