flex: 1不生效的主因是父容器未设display: flex或左栏未用flex: 0 0 240px锁定宽度；右栏需加min-width: 0、overflow-wrap: break-word及box-sizing: border-box防溢出。
flex: 1 不生效？先检查父容器和左栏的 flex 属性
右侧不撑满，八成是父容器没开 display: flex，或者左栏只写了 width: 240px 却没禁用收缩。在 flex 容器里，width 本身不锁定尺寸——默认 flex-shrink: 1 会让它被压缩，尤其当右栏内容多或视口窄时。
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器必须设
display: flex（不能只写在子元素上） - 左栏用
flex: 0 0 240px，等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px - 务必配合
box-sizing: border-box，否则 padding/border 会额外加宽，导致右栏空间算少
右栏内容溢出或换行失败？不是 flex 的问题，是内容本身抗收缩
flex: 1 只分配空间，不管内容怎么断行。长 URL、连续无空格英文、嵌套 table 这些天然拒绝缩小，右栏就会横向溢出或撑破布局。
实操建议：
- 给右栏加
word-break: break-word或overflow-wrap: break-word - 若含
table，记得加table-layout: fixed和width: 100% - 某些安卓 WebView 或 Safari 14–15 对盒模型更敏感，一个没封住的
border就可能让右栏消失
要不要用 grid？看你的兼容性底线在哪
display: grid 写两栏确实最干净：grid-template-columns: 240px 1fr 一行搞定。但它不是“更好”，而是“更窄”——IE 全系不支持，旧版 Edge ≤15 也不认。
实操建议：
- 内部系统、Electron 应用、纯现代浏览器环境可直接用 grid
- 漏写
grid-template-columns会导致所有子项堆在第一列——grid 默认单列 - 别混用
240px 100%，百分比会让第二列试图占满整个父容器，把左栏挤出视口 - 间隙统一用
gap: 1rem，别给子项加margin，否则破坏轨道计算
为什么 margin-left 方案还在用？它真能兜底 IE6
如果你必须支持 IE6–8，float + margin-left 是唯一可靠路径。它的逻辑简单粗暴：左栏 float: left 脱离文档流，右栏靠 margin-left 主动让位。
实操建议：
- 左栏必须设明确
width并float: left - 右栏不浮动，但
margin-left值 ≥ 左栏宽度（含 border/padding） - 父容器加
overflow: hidden或伪元素清除浮动，否则高度塌陷 - 这个方案里，
margin-left和左栏width必须手动保持一致，改一处漏一处就错位
box-sizing 是否统一、右栏内容是否自带抗收缩特性、父容器宽度来源是否明确——Flex 和 Grid 都只负责分空间，不帮你处理内容层的顽固性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
