用 display: flex + flex: 0 0 200px 控制左侧固定宽，右侧用 flex: 1 自动填满最可靠；float 易致父容器塌陷，absolute 使右侧脱离文档流无法撑高；IE10/11 需写 flex: 1 1 0%，Safari 9 需加 min-width: 0 和 word-break: break-word。
Flexbox两栏布局：左侧固定宽度，右侧自动填满
直接说结论：用 display: flex + flex: 0 0 [width] 控制左侧，右侧用 flex: 1 最可靠，兼容性到 Chrome 29+/Firefox 20+/Safari 6.1+，IE10+ 需加 -ms- 前缀但行为有差异。
为什么不用 float 或 absolute？
float 容易触发 BFC 问题，父容器高度塌陷；absolute 会让右侧脱离文档流，无法响应内容撑高。而 Flexbox 天然支持“剩余空间分配”，且不破坏语义和可访问性。
-
float: left后必须清浮动，否则父容器高度为 0 -
position: absolute的右侧区域无法随内容增长而撑开父容器 - Flexbox 下，
flex: 1本质是flex: 1 1 0%，会主动抢占剩余空间，无需计算具体数值
关键 CSS 写法与参数含义
核心在于三个属性的组合：父容器设 display: flex，左侧设 flex: 0 0 200px（不缩放、不增长、固定 200px），右侧设 flex: 1。
-
flex: 0 0 200px中的0 0表示flex-grow: 0和flex-shrink: 0，避免被压缩或拉伸 - 右侧写
flex: 1比flex: 1 1 auto更稳妥——auto可能受内容最小宽影响，导致右侧没填满 - 如果左侧是图片或图标容器，记得加
min-width: 0防止 flex item 内容溢出时撑宽父级
容易踩的坑：IE10/11 和 Safari 9 的兼容细节
IE10/11 对 flex: 1 解析不一致，常表现为右侧宽度为 0；Safari 9 在嵌套 flex 容器中可能忽略 min-width。
立即学习“前端免费学习笔记（深入）”；
- IE10/11 必须显式写全：
flex: 1 1 0%，不能简写为flex: 1 - Safari 9 下，若右侧含
table或长单词，需加word-break: break-word和min-width: 0 - 不要给父容器设
width: 100%同时又设max-width，某些旧版 Safari 会误判可用空间
最复杂的其实是内容边界——比如右侧有带 padding 的卡片，或左侧有 border，这些都会影响实际可用宽度。别指望 flex 自动帮你扣掉，该减就减，该 box-sizing 就 box-sizing。
