父容器必须设明确高度（如min-height: 100vh）才能使子栏等高，否则min-height在子项上基本无效；子栏需保持align-items: stretch默认行为，禁用height/min-height等干扰属性。
父容器必须设明确高度才能约束子栏最小高度
flex 或 grid 下，min-height 不能直接让左右栏“同步撑高”，因为子栏默认不继承父容器高度——除非父容器本身有明确高度（比如 height: 100vh 或 min-height: 100vh）。漏掉这步，min-height 在子元素上基本无效。
常见错误现象：min-height: 400px 写在左栏或右栏上，但实际高度还是由内容决定，页面底部留白一大片。
- 父容器加
min-height: 100vh（推荐），比height: 100vh更安全，防内容超长时被截断 - 若父容器是
display: flex，子栏要等高，还得确认没被重置align-items；默认是stretch，但某些 CSS 重置库会改成flex-start - grid 布局下同理：父容器需有明确高度，否则
min-height对子项无约束力
左右栏各自设 min-height 的实际效果差异
单独给左栏或右栏设 min-height，只影响该栏自身，不会拉高另一栏。它解决的是“单栏内容太少显得空”的问题，不是“两栏对齐”问题。
例如右栏只有几行文字，加 min-height: 300px 能避免它塌缩，但左栏仍按内容高度显示，视觉上还是不对齐。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 左栏固定宽，适合设
min-height: 300px防空白（如侧边导航栏） - 右栏内容长度波动大，设
min-height: 200px可防止主区域过窄，但别指望靠它实现等高 - 如果真要两栏底部对齐，优先靠父容器
align-items: stretch+ 明确高度，而不是分别设min-height
Flex 布局下 min-height 和 flex 属性的冲突点
flex: 0 0 auto 或 flex: 0 0 240px 的栏，min-height 有效；但若用了 flex: 1，它的行为优先级高于 min-height——也就是说，只要空间够，它会先伸展填满，min-height 不起作用。
换句话说：flex: 1 的栏，min-height 只在父容器高度极小（小于设定值）时才生效，日常开发中几乎看不到它起效。
- 想稳控右栏最小高度，改用
flex: 0 1 auto+min-width+min-height组合 - 避免同时写
flex: 1和min-height并期待后者主导——逻辑上矛盾 - 调试时可临时加
outline: 1px solid red看实际渲染高度，比猜更准
Grid 布局中 min-height 的生效前提更隐蔽
Grid 子项的 min-height 只有在所在轨道（track）有明确高度时才被尊重。而默认的 grid-template-rows: auto 不提供高度约束，所以即使写了 min-height: 400px，子项照样按内容收缩。
真正起效的方式是：要么父容器有 min-height + align-items: start（让子项从顶部开始占位），要么显式定义行高，比如 grid-template-rows: minmax(400px, auto) auto。
- 不要依赖
min-height让 grid 子项“撑开整行”，那是 row 定义的事 - 如果左右栏都需要最小高度，建议统一由父容器
min-height控制，子项只负责内容排布 - 响应式切单栏时，
@media内要同步检查min-height是否还合理，小屏下 400px 可能导致滚动条突兀出现
min-height 都不是独立生效的属性。它永远依附于父容器的高度上下文，也受 box-sizing、padding、border 影响。调试前先确认 box-sizing: border-box 已全局启用，否则 min-height + padding 会悄悄超出预期。 
