主栏用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 和父容器高度来源——这两处出问题，其他设置全白搭。