主内容区应设 flex: 1（即 flex: 1 1 0），使其忽略自身宽度、主动占满剩余空间；侧边栏用 flex: 0 0 260px 并通过切换 flex-basis 实现收起/展开，父容器需有明确高度（如 min-height: 100vh）且 IE11 下须加 -ms-flex 和 min-width: 0。
flex布局中如何设置主内容区优先占满剩余空间
主内容区应该用 flex: 1，而不是 flex: auto 或固定 flex-basis。因为 flex: 1 等价于 flex: 1 1 0，它会让元素忽略自身宽度，主动撑开并吸收父容器所有剩余空间，侧边栏则保持固有尺寸不被拉伸。
常见错误是给主内容区设 width: 75% 或 flex: 0 0 75% —— 这在响应式场景下会和侧边栏冲突，尤其当侧边栏宽度变化（比如收起/展开）时，主内容区无法自适应。
- 侧边栏推荐用
flex: 0 0 260px（收缩不放大，基础宽 260px） - 主内容区用
flex: 1，不设 width / max-width - 父容器必须声明
display: flex且无换行（flex-wrap: nowrap是默认值，不用显式写）
侧边栏需要固定宽度又支持收起时怎么写
收起/展开本质是切换侧边栏的 flex-basis，不是靠 display: none —— 后者会破坏 flex 流，导致主内容区不能自动回填空间。正确做法是用类控制 flex-basis 值，并搭配 overflow: hidden 防止内容溢出。
示例结构：
.sidebar { flex: 0 0 260px; transition: flex-basis 0.3s ease; }
.sidebar.collapsed { flex-basis: 0; overflow: hidden; }
.main { flex: 1; }
- 收起时设
flex-basis: 0，而非width: 0，否则 flex 仍会保留原尺寸“占位” - 必须加
overflow: hidden，否则内部文字或图标可能在flex-basis: 0下依然显示 - 过渡动画只对
flex-basis有效；flex-grow和flex-shrink不触发 CSS 动画
主内容区内容高度不足时，侧边栏为啥没跟着撑高
这是 flex 默认行为：子项默认按内容高度伸缩，不会自动拉伸到容器高度。要让侧边栏和主内容区等高，需在父容器上加 align-items: stretch（默认值，通常不用写），但更关键的是确保父容器本身有明确高度来源 —— 比如 min-height: 100vh 或继承自某个有高度的祖先。
- 如果父容器高度由内容撑开，而内容又很短，那所有子项都只会“贴着内容高度”，侧边栏自然不会变长
- 解决方法：给父容器加
min-height: 100vh，或使用height: 100%（前提是所有父级都有明确高度） - 避免对侧边栏单独设
height: 100%，这在 flex 中常因脱离文档流而失效
IE11 下 flex 布局错乱怎么办
IE11 对 flex: 1 的解析有 bug，特别是当主内容区含内联元素或未设 min-width: 0 时，容易溢出或不收缩。必须加前缀和兜底规则。
关键修复项：
.main {
flex: 1;
-ms-flex: 1;
min-width: 0; /* IE11 必加，防止文本溢出破坏 flex */
}
.sidebar {
flex: 0 0 260px;
-ms-flex: 0 0 260px;
}
-
min-width: 0是 IE11 下 flex 子项不溢出的硬性要求，尤其内容含长单词、URL 或图片时 -
-ms-flex前缀不可省略，仅写flex在 IE11 中会被忽略 - 避免在 flex 容器里用
float或position: absolute，IE11 下兼容性极差
主内容区和侧边栏的 flex 协作，核心不在“怎么分宽度”，而在“谁让出空间、谁接收空间、谁控制边界”。很多问题其实出在父容器高度缺失、IE 兜底遗漏，或者误把视觉宽度当成 flex 分配逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
