双栏布局自适应高度的关键是让每栏按内容自然伸缩而非强行等高：父容器不设height、子项不用height:100%或position:absolute，flex默认stretch在无父高时自动失效，各栏依内容撑开；Grid中应避免grid-template-rows:1fr1fr，改用auto auto。
双栏布局自适应高度，关键不是“让两栏强行等高”，而是让每栏按自身内容自然伸缩，同时保持整体结构稳定——只要不写死 height、不滥用 position: absolute、不误用 flex: 0 0 auto，它本就会随内容撑开。
为什么一加 Flex 就两栏高度“锁死”了？
常见现象：给父容器加了 display: flex，两栏却总是一样高，哪怕左边只有标题、右边堆满表格。这不是 Flex 的 bug，是默认行为被误解了。
-
align-items: stretch只在父容器有明确高度（如height: 500px或min-height: 100vh）时才生效；父容器高度不定，子项就退回到内容高度 - 如果某栏内部用了
position: absolute（比如右栏放了个全高视频遮罩），它脱离文档流，父容器“看不见”它的实际高度，导致左栏也被压扁 - 写了
flex: 0 0 auto或align-self: flex-start，等于主动放弃交叉轴拉伸，和没加 Flex 效果一致
不用 JS，纯 CSS 让左右栏各自撑开
核心原则：父容器不设 height，子项不设 height: 100%，让浏览器按内容自然计算高度。
- 父容器用
display: flex即可，无需额外设置align-items—— 默认stretch在无父高时自动失效，子项各走各的路 - 若需某栏占满剩余空间（例如左栏固定，右栏填满视口高度），只给它加
flex: 1，而不是height: 100%；后者在父容器无高时会算成 0 - 右栏含
position: absolute元素时，必须用padding-bottom或伪元素模拟占位，否则左栏高度塌陷
Grid 方案下如何避免高度被“平均分配”？
用 display: grid 做双栏，容易掉进 grid-template-rows: 1fr 1fr 的陷阱——它强制等分，和“自适应”背道而驰。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 想让每栏按内容伸缩，直接用
grid-template-rows: auto auto，这是默认值，甚至不用写 - 需要一栏最小高度、另一栏滚动时，给后者加
min-height: 0+overflow: auto（Grid 中子项默认最小高度为min-content，会撑大整个网格） - 若容器本身设了固定
height（如height: 400px），又希望内容少时收缩、多时滚动，就配overflow: hidden或overflow-y: auto，别碰max-height—— 它在 Grid 中行为不稳定
iframe 或视频区域怎么不破坏双栏流式高度？
<iframe></iframe> 和 <video></video> 本身无法靠 CSS 自适应高度，尤其当它们被放在右栏时，极易导致左栏高度计算错误或内容被覆盖。
-
<iframe></iframe>的height: auto无效，必须用 JS 读取contentDocument.body.scrollHeight后赋值；但更稳妥的做法是把它包进一个有padding-bottom的容器里，用 paddingTop / paddingBottom 比例占位 - 视频区域若需“视觉上全高”，不要用
position: absolute覆盖右栏，改用 Flex 内部嵌套：.video-wrapper { height: 100%; }+.video-container { height: 100%; object-fit: cover; } - 移动端要注意
100vh在 Safari 中滚动时地址栏收起会导致高度跳变，优先用min-height: 100dvh，并用@supports (min-height: 100dvh)安全兜底
真正难的不是写对那几行 CSS，而是排查那些藏在第三方组件或深层样式里的 height: 100%、max-height: 200px 或 position: absolute —— 它们往往只在特定内容长度下才暴露问题。
