直接用display:flex就能实现左右两栏等高，前提是父容器有可信高度来源（如min-height:100vh），且子项未设height/min-height/align-self等覆盖align-items:stretch默认行为；否则因高度计算链断裂或子项主动拒绝拉伸而导致不等高。
直接用 display: flex 就能实现左右两栏等高，但前提是父容器有“可信的高度来源”，否则 align-items: stretch（默认值）根本没空间可拉。
为什么写了 display: flex 还不等高
这不是 Flex 失效，而是高度计算链断了：
- 父容器是
height: auto且内部没内容撑开，交叉轴（垂直方向）没基准可依 - 某栏写了
height、min-height或align-self: flex-start，直接覆盖 stretch 行为 - 用了
flex-direction: column却还指望“左右等高”——此时交叉轴是水平方向，align-items控制的是宽度对齐 - 子项里有
position: absolute元素，内容脱离文档流，父容器无法正确测量高度 - 父容器外层加了
overflow: hidden且高度受限，子项被视觉截断，“不等高”只是假象
display: flex 下左固定右自适应的写法要点
别只写 width: 240px，那容易被内容挤压变形：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 左栏用
flex: 0 0 240px：不增长、不收缩、基准宽 240px，防溢出 - 右栏用
flex: 1：占满剩余空间，同时保持align-items: stretch生效 - 避免给右栏加
overflow: hidden或position: relative后再嵌套绝对定位元素，可能触发 BFC 导致高度计算异常 - 如果右栏含长英文/数字无空格，加
word-break: break-word防溢出
移动端和 SPA 场景下的关键兜底
软键盘弹出、地址栏收起、路由懒加载都会让高度突然失效：
- 父容器统一用
min-height: 100vh，别用height: 100vh—— iOS Safari 在地址栏动画时会重绘 viewport，height可能瞬间归零 - 子项禁用
height: 100%和min-height（相对单位），改用flex: 1；若需保底高度，写min-height: 44px这类绝对值 - SPA 中，确保路由容器（如
.router-view或#app）有min-height: 100vh，否则子组件里写height: 100%必然失效 - 图片加载延迟易导致初始塌陷：给
<img>加height: auto和max-width: 100%，同时确保其父容器有min-height
真正难的不是写对那行 CSS，而是在各种动态场景下，始终保证父容器有“可信赖的高度来源”——没有这个前提，align-items: stretch 就像没水的水泵，转得再快也抽不上来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
