右侧内容自动缩进不等于右栏自适应，margin-left仅实现视觉偏移，非真正弹性布局；flex布局下须用flex: 0 0 240px锁左栏、flex: 1配min-width: 0撑右栏，禁用margin-left以防破坏分配。
右侧内容自动缩进 ≠ 右栏自适应，别混淆 margin 和 flex 行为
“右侧内容自动缩进”常被误理解为给右栏加 margin-left 就完事——但这只是视觉偏移，不是真正的自适应布局。真正要的是：左栏固定、右栏占满剩余空间，且内容不被遮挡、不溢出、不塌缩。margin-left 在 float 或普通流中有效，但在 flex 或 grid 里反而会破坏弹性分配，导致空白或重叠。
常见错误现象：.main { margin-left: 240px; } + display: flex 父容器 → 右栏被挤出视口，或出现横向滚动条；左侧菜单折叠后，右侧没响应收缩，仍留着 240px 空白。
- 用
margin-left前，先确认父容器是否处于普通文档流（即没开display: flex或display: grid） - 若已用
flex，删掉所有margin-left，改用flex: 1+ 左栏flex: 0 0 240px - 如果必须兼容 IE9 及以下（极少数场景），才考虑
float+margin-left，但需同步清除浮动（overflow: hidden或伪元素）
flex 布局下右栏不撑满？检查这两个硬性条件
flex: 1 不生效，95% 是因为父容器或左栏没“锁死”行为。它不是魔法，而是依赖明确的伸缩规则。
- 父容器必须有
display: flex（不能只写在子元素上） - 左栏必须用
flex: 0 0 240px，而非width: 240px—— 后者在窄屏或内容挤压时会被flex-shrink: 1压缩，实际宽度变小，右侧空间就多出来，造成错位 - 务必加
box-sizing: border-box到左栏，否则padding和border会让真实宽度 > 240px，右侧空间计算失效 - 右栏若含表格或
iframe，需额外加width: 100%，否则它们按自身内容撑宽，无视flex: 1
长英文/URL 溢出导致右栏“撑破”？断行策略要前置
flex 分配的是容器宽度，不管内容是否可折行。flex: 1 再稳，也拦不住一串 50 个字母无空格的 URL。此时右栏会横向溢出，甚至触发滚动条或换行错乱。
- 在右栏根元素加
word-break: break-word（Chrome/Firefox/Safari 支持好） - 或更稳妥地用
overflow-wrap: break-word（语义更准，IE11+ 支持） - 避免只靠
min-width: 0——它只影响 flex 基础计算，不解决文本溢出 - 若右栏内嵌
<pre class="brush:php;toolbar:false;"></pre>或代码块，单独设white-space: pre-wrap，别让全局断行规则破坏代码格式
侧边栏 fixed 定位时，右栏怎么“感知”留白？
当左侧菜单用 position: fixed（如后台管理页），它脱离文档流，右栏不会自动绕开——你得显式告诉它：“左边有 240px 固定区域”。这不是自适应，是预留空间。
- 侧边栏设
position: fixed; top: 0; left: 0; width: 240px; height: 100vh; - 右栏（如
<main></main>）加margin-left: 240px;，值必须和侧边栏width严格一致 - 同时确保
html, body { overflow-y: scroll; }，否则 Safari 下100vh可能计算异常，导致侧边栏高度不足 - 响应式场景下，侧边栏收起时，右栏的
margin-left必须同步改为0（用 class 切换，别用 JS 动态改内联 style）
真正麻烦的从来不是“怎么缩进”，而是“缩进值是否随 DOM 变化实时更新”。flex: 1 自带响应能力，margin-left 是静态快照——后者一旦写死，菜单折叠、字体加载延迟、动态插入节点，都可能让它失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
