code标签本身是行内元素，不参与文档流高度计算；需调整其父容器（如pre、div）的white-space、overflow、display等属性，并排查float、absolute导致的脱离文档流问题。
code 标签本身是行内元素，不自动撑开外层容器高度——这不是它“没自适应”，而是它根本不在文档流高度计算中起作用；真正要调的，是包裹它的容器（如 pre、div）以及是否被 white-space、overflow 或 display 规则压制了高度行为。
pre 标签默认高度不随内容变？先确认是否被 overflow 或 white-space 锁死
pre 是 code 最常见的父容器，它默认会保留换行和空格，但高度异常往往来自两个隐藏开关：
-
overflow: hidden或overflow: auto会让pre变成块级格式化上下文（BFC），此时若没设height或max-height，它本该撑开；但一旦加了max-height，就可能截断内容且不触发滚动条（尤其当没配overflow-y: auto） -
white-space: pre-wrap或pre-line比默认pre更友好，能折行又保空格；但若写成white-space: nowrap，长代码会横向溢出，容器高度反而“看起来”没变高 - 别在
pre上写height: 100%——它需要父级有明确高度才能生效，否则等于height: 0
code 标签被 flex 容器压缩？检查 align-items 和 min-width
把 code 放进 display: flex 的容器里，常见问题不是它“不撑高”，而是父容器的 align-items: center 或 flex-start 把它垂直对齐到顶部，同时子项默认不拉伸。更隐蔽的是：code 在 flex 中默认带 min-width: auto，遇到长行会强行撑宽容器，间接影响高度布局。
- 想让
code随内容自然撑高 → 父容器设align-items: flex-start，并确保没写flex: 0 0 auto这类收缩声明 - 想让它填满剩余高度（比如和旁边文本并排）→ 给它加
flex: 1，而不是height: 100% - 防长代码横向撑破：给
code加white-space: pre-wrap+word-break: break-all，再配overflow-x: auto
pre + code 组合出现高度塌陷？大概率是父容器 float 或 position:absolute
如果 pre 外层是 float: left 的 div，或用了 position: absolute，那它脱离文档流，父容器就“看不见”它有多高——这和 code 无关，是布局模型本身的限制。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 清除浮动：在
pre后加，或给父容器设overflow: hidden/display: flow-root - 绝对定位场景：不能靠
pre自身撑高，得用padding-bottom或伪元素模拟占位，或者改用position: relative+top偏移 - 别在
pre上写height: auto !important——它本来就是auto，加了反而暴露你没找到真因
需要最小/最大高度控制？只作用于 pre，别碰 code
code 是行内元素，设 min-height 无效；所有高度约束必须落在 pre 或其直接父 div 上。
- 基础组合：
pre { min-height: 120px; max-height: 400px; overflow-y: auto; } - 配合字体缩放：
pre { min-height: 6rem; max-height: 50vh; }（rem相对根字号，vh相对视口，避免固定像素僵硬） - 滚动条样式需兼容：Chrome/Edge 用
::-webkit-scrollbar，Firefox 用scrollbar-width和scrollbar-color，Safari 17+ 才支持scrollbar-gutter
真正难调的从来不是 code 本身，而是它嵌套的每一层容器有没有悄悄加 height: 100%、overflow: hidden 或 display: inline——这些规则在开发者工具里看着无害，却足以让整个高度链失效。排查时从最外层开始，一层层关掉 CSS 属性，比反复改 code 的样式更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
