使用 display: flex 是实现左侧固定、右侧自适应布局最直接兼容的方式；左侧设固定 width，右侧用 flex: 1；需注意响应式隐藏时同步调整 flex 属性，并控制右侧内容换行与溢出。
左侧固定宽度，右侧填满剩余空间
用 display: flex 是最直接、兼容性足够（IE11+）且不易出错的方式。不需要浮动、不需要绝对定位，也不依赖 JS 计算宽度。
- 父容器设
display: flex，子元素中左侧设固定width（如200px），右侧用flex: 1 - 避免给右侧元素设
width: 100%或flex: auto——这会导致它收缩或溢出 - 如果左侧要响应式隐藏（比如移动端），记得同时控制
flex行为，否则右侧可能仍留白
左侧固定，右侧用 calc(100% - 左侧宽度) 实现
适合必须用纯 CSS 测量、且不希望引入 flex 布局的场景（如老项目兼容 IE9–IE10）。但要注意：一旦左侧宽度是 em、rem 或百分比，calc() 就难维护；固定像素最稳妥。
- 左侧设
float: left; width: 200px; - 右侧设
margin-left: 200px;或width: calc(100% - 200px); - 务必给右侧加
box-sizing: border-box，否则 padding/border 会撑破计算宽度 - 浮动方案需清浮动（如父容器加
overflow: hidden），否则高度塌陷
避免 overflow-x 滚动条意外出现
右侧区域内容超长时，常误触发横向滚动条——根本原因往往是父容器没限制 overflow，或子元素未正确约束尺寸。
- 父容器（flex 容器）建议加
overflow: hidden，防止内部伸缩失控 - 右侧区域若含表格或长单词，需加
overflow-wrap: break-word和max-width: 100% - 慎用
white-space: nowrap，它会让文本强行不换行，直接撑宽容器
移动端适配时左侧菜单收起的常见处理
固定左侧菜单在小屏上通常要隐藏，靠按钮展开。此时不能只靠 display: none 切换，否则 flex 布局下右侧不会自动占满——得同步调整 flex 属性。
- 收起时，左侧加
display: none，同时右侧保持flex: 1即可自然撑满 - 若用 visibility + width 控制（为了动画过渡），则左侧需设
flex: 0 0 0，右侧仍用flex: 1 - 别在媒体查询里重复写整个布局逻辑，只改关键属性更安全
实际中最容易被忽略的是右侧内容的盒模型和换行行为——哪怕布局结构完全正确，一段没截断的 URL 或表格列宽失控，都会让“自适应”失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
