主栏用flex:1占满剩余宽度，副栏需设min-width:0防压缩、配合flex-shrink:0或弹性值，并确保父容器有明确高度来源。

flex布局中主栏副栏如何分配剩余空间

主栏占满剩余宽度、副栏固定或弹性收缩，关键在 flex

的三个属性协同：父容器设 display: flex，主栏用 flex: 1（等价于 flex: 1 1 0），副栏根据需求设固定宽或 flex: none / flex: 0 0 auto。

• flex: 1 主栏会忽略自身内容宽度，强行撑满可用空间
• 副栏若设 width: 240px，需配合 flex-shrink: 0 防止被压缩（尤其内容窄时）
• 若副栏也要弹性（比如“最多占30%”），可用 flex: 0 1 30%，但注意浏览器对百分比基准的计算逻辑（基于父容器主轴尺寸）

为什么副栏有时会被意外压缩？

常见于副栏有文字或图片时突然变窄——本质是 flex-shrink: 1 默认生效，且副栏的 min-width 未显式设为 0。Flex 容器默认按内容最小尺寸限制收缩下限。

• 修复方式：给副栏加 min-width: 0（对文本/图片容器尤其关键）
• 同时确认副栏没设置 white-space: nowrap 或未约束的 inline 元素，否则会强制扩大最小宽度
• 用 Chrome DevTools 检查 computed 样式里的 min-width 和 flex-basis 实际值

主栏内滚动与副栏高度同步的坑

当主栏内容超长需内部滚动，而副栏高度又依赖主栏（如边框对齐、背景色延伸），直接设 height: 100% 无效——因为 flex 容器的 height 若未显式设定，子项的百分比高度无参照。

• 解决路径一：父容器设 height: 100vh 或具体像素值，再让主栏 overflow-y: auto
• 解决路径二：用 align-items: stretch（默认值）确保副栏自动拉伸，但前提是主栏不设 height 或 max-height 破坏拉伸逻辑
• 避免在主栏上写 flex: 1 1 auto ——flex-basis: auto 会让它先按内容高度计算，再拉伸，可能引发布局抖动

响应式切换：从分栏回到垂直堆叠

小屏下主栏副栏必须上下排列，不能只靠 flex-direction: column，否则副栏仍可能被压缩或错位。

立即学习“前端免费学习笔记（深入）”；

• 媒体查询内重置关键属性：flex-direction: column + 主栏 flex: none（取消弹性）+ 副栏 width: 100%
• 更稳妥做法：小屏时移除副栏的 flex 相关声明，回归普通块级流，用 margin 或 gap 控制间距
• 注意 gap 在 flex 布局中兼容性良好（Chrome 84+/Firefox 63+），比手动算 margin 更可靠

实际最易忽略的是副栏的 min-width: 0 和父容器高度来源——这两处出问题，其他设置全白搭。