企业级后台骨架屏的Flex布局核心是三层刚性嵌套加两处关键收缩控制（min-height: 0和flex: 1 1 0），外层设display: flex; flex-direction: column; height: 100vh;，.app-body设flex-direction: row;，内容区需嵌套flex-column并加min-height: 0和flex: 1; overflow: auto;。
直接给结论：企业级后台骨架屏的 Flex 布局，核心不是“用多少层 flex”，而是三层刚性嵌套 + 两处关键收缩控制（min-height: 0 和 flex: 1 1 0），漏一个就导致内容区滚动失效、侧边栏撑出屏幕、IE11 高度塌陷。
外层容器必须设 display: flex; flex-direction: column;
这是整个骨架不崩的起点。顶部导航和主体区域天然纵向堆叠，但很多人错把 display: flex 加在 body 上——Safari 和 Chrome 新版本会错误解析 height: 100vh，导致主体区域高度不足，底部被截断。
-
.app（根容器）设display: flex; flex-direction: column; height: 100vh;，不碰body -
.app-header高度固定（如60px），.app-body自动占满剩余空间 - 避免用
position: absolute覆盖子元素——它脱离 flex 流，后续加滚动或响应式时极易错位
.app-body 必须设 flex-direction: row; 分左右栏
这是双栏能否自适应的关键。只给侧边栏写 width: 240px 不够，Flex 容器必须明确感知“横向分栏”意图，否则右侧内容区不会自动填满剩余空间。
-
.app-body设display: flex; flex-direction: row; - 侧边栏用
flex: 0 0 240px;（不放大、不缩小、基准宽 240px），别只写width - 内容区用
flex: 1;（等价于flex: 1 1 0%），IE11 必须补全为flex: 1 1 0; - 内容区必须加
min-height: 0;，否则内部overflow: auto会失效
内容区内部再嵌套 flex-direction: column; 并控制滚动
面包屑 + 表格/卡片列表这类上下结构，若不嵌套 flex-column，表格超长时无法滚动，或者面包屑被挤出视口顶部。
立即学习“前端免费学习笔记（深入）”；
-
.app-main（内容区）自身设display: flex; flex-direction: column; -
.app-breadcrumb和.app-content是它的直接子项，自然纵向排列 -
.app-content加flex: 1; overflow: auto; min-height: 0; - 如果里面放
<table>，它的直接父容器还得加 <code>height: 100%;，否则overflow不触发移动端适配别用
display: none，改用order和flex-direction: column;单纯在媒体查询里给侧边栏加
display: none，会导致内容区突然变宽但内部子项未重排，卡片间距错乱、按钮换行异常。- 保持 DOM 结构不变，只改
.app-body的flex-direction: column; - 侧边栏加
order: -1;，让它在小屏排到顶部 - 内容区加
order: 1;，自然下沉 - IE11 不支持
order，需降级为flex-direction: column-reverse;+margin-top模拟
最易被忽略的是
min-height: 0——它不是可选项，而是 flex 子项能否收缩、滚动能否生效的开关；IE11 下flex: 1必须展开写，否则主区域高度可能为 0。这些点不写死，骨架屏在真实业务中跑几天就会出问题。 - 保持 DOM 结构不变，只改
