用display: flex是当前最稳妥、可维护性最强的方案，尤其适合后台管理这种需要固定侧边栏+自适应主内容区的场景；它避免了float坍塌、margin硬编码同步难、响应式过渡生硬等问题，配合width固定侧边栏与flex: 1主内容区，能稳定实现高度自适应与折叠动画。
直接用 display: flex 就行，别绕弯子。其他方案要么兼容性差、要么维护成本高、要么容易出视觉错位——尤其右栏内容含长英文或数字时，一不留神就溢出容器。
用 display: flex 实现左固定右自适应最稳
这是当前项目里真正能落地、改起来不踩坑的写法。IE10+ 全支持，代码少，逻辑直，响应式也容易加。
- 父容器必须设
display: flex，漏掉这句等于白写 - 左栏用
flex: 0 0 250px（不伸缩、不收缩、基础宽 250px），比只写width: 250px更安全，能防内容撑宽变形 - 右栏用
flex: 1，它会自动占满剩余空间；若需最小宽度保护，加min-width: 300px - 右栏内容含长英文/数字无空格时会溢出，此时加
word-break: break-word或overflow-wrap: break-word - 左栏默认不会随右栏拉高——这不是 bug，是 CSS 默认行为；要等高就得确认父容器没覆盖
align-items: stretch（它是默认值，但某些重置 CSS 会干掉）
为什么不用 float 或 position: absolute
它们不是“不能用”，而是协作和维护成本太高：别人接手第一反应是删掉重写。
-
float必须手动清除浮动，overflow: hidden看似简单，但会意外裁剪box-shadow或position: absolute子元素 - 左右栏高度不一致时，背景色无法对齐；想等高得靠 JS 或 BFC 技巧，不稳定
-
position: absolute会让右栏脱离文档流，后续添加新元素容易错位，且响应式适配要全重写 - 唯一合理使用场景：维护 IE6–9 的老系统；新项目里出现
float: left，基本等于技术债预警
用 display: grid 的前提和限制
当你明确知道是“两列结构”，且不需兼容 IE，grid 是最干净的写法——但得清楚边界在哪。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid+grid-template-columns: 250px 1fr，1fr表示“剩余空间的 1 份”，不是百分比 - 别给子元素再设
width: 100%，grid子项默认不继承父容器width，双重要求会导致错位 - 加间隙用
gap: 1rem，别用margin挤子元素，否则破坏轨道计算 - IE 完全不支持
grid，Edge ≤15 也不行；若需兼容，得降级为flex方案 - 小屏适配可用
minmax(250px, 1fr)让左栏保最小宽、右栏弹性分配，但注意小屏下可能撑不开一列
真正容易被忽略的点不在布局本身，而在右栏内容——比如长 URL、连续数字、无空格英文段落，它们会无视容器宽度硬挤出去。这时候 flex 或 grid 都救不了你，必须显式加 word-break 或 overflow-wrap 才行。
