双栏布局中嵌套Flex必须显式为子容器设display: flex，因Flex不继承不穿透；常见错误是漏写该声明导致样式无效，实操需确认三层结构（双栏→栏容器→内部布局容器）并在第三层设flex及必要属性如flex-wrap、min-width: 0。
双栏布局里再套一层 flex 布局，必须显式声明 display: flex
父容器是双栏（比如用 display: grid 或 display: flex 实现），但你想在其中某一栏内部再做横向/纵向排列——这时候很多人直接给子元素写 flex: 1 或 justify-content，结果完全没反应。根本原因是：flex 不继承、不穿透，子容器默认仍是普通块级流。
常见错误现象：
- 右侧栏里三个按钮堆成一列，加了
display: flex; flex-direction: row也不横排——漏写了display: flex到该栏的直接容器上 - 嵌套后高度塌陷，内容溢出或看不见——父栏没设
height或min-height，子层flex: 1缺少参考高度
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 确认嵌套层级：双栏容器 → 左/右栏容器 → 内部布局容器（这层必须加
display: flex） - 若子布局需换行，必须在该层加
flex-wrap: wrap；父层的flex-wrap对它无效 - 避免
flex: 1失效：子项内含长文本或图片时，加min-width: 0（不是0px）
用 Grid 嵌套 Grid 时，grid-template-columns 作用域只限当前容器
你在双栏的右侧栏里写了一个 div 并设了 display: grid; grid-template-columns: 1fr 1fr，但两列宽度不均等，甚至挤成一列——大概率是这个 div 没撑满父栏宽度，或者父栏本身用了 max-width 限制但没传高度上下文。
Grid 的列定义不会“继承”外层结构，它只按自己容器的可用宽度计算。尤其当父栏是 grid 或 flex 的弹性项时，它的宽度可能由内容收缩而来，而非你预期的 70%。
实操建议：
- 检查父栏是否设置了
width、min-width或flex-basis，否则子 Grid 容器宽度可能趋近于 0 - 子 Grid 容器加
width: 100%或min-width: 0（防 flex-basis 干扰） - 避免在子 Grid 里混用
float或position: absolute，会脱离网格流
里不能直接嵌 <tr><table></table></tr>
有人想在双栏中用表格实现左信息栏+右详情栏，然后在详情栏某单元格里再塞一个子表格，于是写成：
<tr>
<td>姓名</td>
<td><table><tr><td>子数据</td></tr></table></td>
</tr>
浏览器会直接把那个 移出 ，DOM 结构彻底错乱，CSS 选不到、打印丢失、读屏器跳过——这不是兼容性问题，是 HTML 规范强制修复。正确做法只有两种：
- 把子表格放进
里（不是 ），并重置关键样式：border-collapse: separate、max-width: 100%、overflow-x: auto
- 放弃嵌套
，改用
，或用 display: grid 模拟表格对齐
嵌套布局最容易被忽略的点：语义与可访问性断裂
双栏本身已隐含“主-辅”或“内容-侧边栏”关系，再往里嵌 flex/grid，容易让视觉顺序和 DOM 顺序脱节。比如左侧技能栏用 flex-direction: column-reverse 把最新技能放最上面，但屏幕阅读器仍按源码顺序读——用户听到的是“三年经验 → 五年经验”，而看到的是反的。
还有嵌套后焦点管理失效：键盘 Tab 进入右栏，却卡在某个未设 tabindex 的 flex 子项里出不来；或者 aria-labelledby 指向了已被移出 DOM 的节点（常见于 table 嵌套失败后）。
真正难的不是怎么嵌，而是每次加一层，都得同步检查：
- DOM 顺序是否仍符合逻辑流（尤其用
order 或 grid-row 调整位置时）
- 所有交互元素是否都有明确的
role 和焦点状态
- 响应式断点切换后，嵌套结构是否导致某层容器高度坍缩、内容不可见
里（不是 |
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
