最稳推荐用display: flex实现左侧固定右侧自适应，需满足：父容器设display: flex且有明确宽度（如width: 100vw），左侧用flex: 0 0 200px锁定尺寸，右侧用flex: 1并加min-width: 0和box-sizing: border-box防溢出。
用 display: flex 实现左侧固定、右侧自适应是最稳、最推荐的方式，H5 场景下兼容性足够（Chrome 29+、Safari 6.1+、Firefox 28+、iOS Safari 7.1+、Android WebView 4.4+），关键不是“怎么写”，而是几个隐式约束必须满足。
父容器必须设 display: flex 且有明确宽度
Flex 属性只在 Flex 容器内生效。光给右侧写 flex: 1 没用，必须先确保：
- 父容器加
display: flex（推荐同时写flex-direction: row，虽是默认值，但某些旧 WebView 会忽略） - 父容器要有主轴宽度来源：比如
width: 100%、width: 100vw或max-width: 1200px；否则浏览器算不出“剩余空间”，flex: 1就等于没写 - 避免父容器被
float、position: absolute或display: inline-block破坏上下文
左侧必须用 flex: 0 0 200px 锁定尺寸
只写 width: 200px 是不够的——它只是初始参考值，在小屏或内容挤压下仍会被 flex-shrink: 1（默认）压缩，反而挤占右侧空间。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确写法：
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 这样才真正“固定”：不放大、不缩小、基准就是 200px
- 若左侧含图标+文字，建议加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防换行错位
右侧必须用 flex: 1 并配 min-width: 0
flex: 1 的本质是“把主轴剩余空间按比例分给它”，但它默认以内容最小宽度为底线（min-width: auto）。遇到长 URL、未换行英文、嵌套 flex 容器时，它宁可横向溢出也不收缩。
- 右侧必须加
min-width: 0，强制允许它收缩到 0 - 推荐加
box-sizing: border-box，防止 padding/border 被误算进分配空间（Safari 14–15 尤其敏感） - 内部若有长文本，补上
overflow-wrap: break-word和word-break: break-word
移动端和 Safari 的特别注意点
H5 页面在 iOS Safari 和部分 Android WebView 中容易翻车，常见原因：
- 父容器漏了
width: 100%或100vw，导致 flex: 1 在窄屏下直接失效 - 右侧没加
min-width: 0，长链接或图片撑破布局，出现横向滚动条 - 左侧没加
flex-shrink: 0，小屏下先被压窄，再“抢回”空间，右侧反而更窄 - 响应式收起左侧栏时，别用
display: none（会丢焦点、触发重排），改用媒体查询中设flex-basis: 0+transform: translateX(-100%)+overflow: hidden
