flex子元素不等高并非align-items: stretch失效，而是被悄悄绕过：父容器需有明确高度（如min-height: 100vh），子项不能设height/min-height/align-self，且内容须在文档流中；column布局下align-items控制宽度而非高度。
为什么写了 display: flex 还不等高
不是 align-items: stretch 失效，而是它被悄悄绕过了。Flex 子项默认等高，前提是父容器有高度、子项没锁死自身高度、内容没脱离文档流。
- 子项写了
height、min-height或align-self: flex-start，直接阻断拉伸 - 父容器是
height: auto且内部没内容撑开，交叉轴（垂直方向）没基准可依 - 用了
flex-direction: column却还指望“左右等高”——此时交叉轴是水平方向，align-items控制的是宽度 - 子项里有
position: absolute或position: fixed元素，内容脱离文档流，父容器无法正确测量高度
父容器必须有“可信的高度来源”
没有这个前提，align-items: stretch 就像没水的水泵，转得再快也抽不上来。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐用
min-height: 100vh，比height: 100vh更稳——iOS Safari 在地址栏动画时会重绘 viewport，height可能瞬间归零 -
height: 100%很危险：必须确保所有父级（html、body）都有显式高度，否则计算失败，子项 fallback 到内容高度 - 单页应用（SPA）中，路由容器常没设高度，
height: 100%在子路由里大概率失效
左固定右自适应怎么写才不破等高
关键在 flex 缩写值的三个参数含义，只写 width 容易出问题。
- 左栏推荐用
flex: 0 0 240px：不增长、不收缩、基准宽 240px ——比width: 240px更稳，防内容溢出挤压 - 右栏用
flex: 1：占据剩余空间，同时保持stretch对齐 - 避免给右栏加
overflow: hidden或position: relative后再嵌套绝对定位元素，这可能触发 BFC 导致高度计算异常
移动端和软键盘场景下容易忽略的点
真实场景中，软键盘弹出、地址栏收起、横竖屏切换都会让视口动态变化，仅靠默认行为不够稳。
- 图片加载延迟易导致初始塌陷：给
<img>加height: auto和max-width: 100%，同时确保其父容器有min-height - Bootstrap 4 的
.row默认是display: block，不是 Flex 容器 —— 必须手动加d-flex类；Bootstrap 5 虽默认display: flex，但要检查是否被其他样式覆盖 - 卡片等高必须加
h-100，但得加在<div class="card"> 上，且它的直接父元素（通常是 <code>.col）要有可参考的高度 真正难的不是写对那行 CSS，而是在软键盘弹出、图片异步加载、iOS 地址栏动画这些时刻，align-items: stretch依然有高度可依、有内容。
