flex:1不生效主因是父容器未设display:flex或左侧元素未禁用收缩；正确写法为flex:0 0 250px并配合box-sizing:border-box，右侧需加min-width:0及断行处理。
现代项目直接用 display: flex，别碰 float 或 position: absolute——它们不是“还能用”，而是“改起来会骂人”。
为什么 flex: 1 不生效？父容器和左侧元素都得“锁死”
右侧不撑满，90% 是因为两个地方没设对：父容器没开 flex 上下文，或左侧没禁用收缩。
-
display: flex必须写在父容器上，漏掉就彻底退化为普通块级流 - 左侧只写
width: 250px是危险的——在窄屏或内容挤压下，flex-shrink: 1（默认开启）会让它被压缩，反而侵占右侧空间 - 正确写法是
flex: 0 0 250px，等价于flex-grow: 0; flex-shrink: 0; flex-basis: 250px，真正守住“固定”二字 - 必须配合
box-sizing: border-box，否则 padding 和 border 会额外加宽，导致右侧算出来的“剩余空间”变小
右侧自适应栏为什么溢出或换行失败？
长 URL、无空格英文、嵌套 flex 容器这些内容天然抗拒收缩，flex: 1 本身不管这个。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须加
min-width: 0，否则浏览器会优先保障内容原始宽度，拒绝压缩 - 加
overflow-wrap: break-word或word-break: break-word，强制断行；光靠min-width: 0不够 - 若右侧含
<table>，记得加table-layout: fixed和width: 100%，否则表格按内容撑宽，破坏布局 - Safari 14–15 和部分安卓 WebView 对盒模型更严格，一个没封住的
border就可能让右侧消失
用 display: grid 时两列堆一起？漏写了关键轨道定义
只写 display: grid 不会自动分两列——Grid 默认单列，所有子项全塞进第一列。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
grid-template-columns: 250px 1fr，其中250px是固定列，1fr表示“剩余空间的 1 份” - 别混用
250px 100%，百分比会让第二列尝试占满整个父容器，直接把左侧挤出视口 - 间隙统一用
gap: 1rem，不要给子项加margin，否则破坏轨道计算逻辑 - IE 和 Edge ≤15 完全不支持，若需兼容，降级方案只能是
flex，不能 fallback 到float
真正卡住布局的，从来不是“怎么写”，而是“哪些隐式约束没满足”：父容器宽度来源是否明确（比如 width: 100% 或 100vw）、内容是否自带抗收缩特性、盒模型是否一致、小屏下视口上下文是否丢失——Flex 和 Grid 都只负责分配空间，不帮你兜底。
