外层容器.app必须设flex-direction: column，.app-body必须设flex-direction: row，.app-main内部需嵌套flex-direction: column并加min-height: 0和flex: 1才能实现正确滚动与自适应。
后台双栏布局用 Flex 嵌套，关键不是“嵌套几层”，而是「哪一层必须设 flex-direction: column、哪一层必须设 flex-direction: row」——错一层，侧边栏就撑出屏幕，内容区滚动失效，移动端卡片堆叠错位。
外层容器必须用 flex-direction: column
后台典型结构是「顶部导航 + 主体区域」，主体再分「左侧菜单 + 右侧内容」。如果只在中间某一层加 display: flex，height: 100vh 在 Safari 或 Chrome 新版本里会计算错误，导致内容区高度不足、底部被截断。
-
.app（根容器）设display: flex; flex-direction: column;，确保纵向堆叠 - 不要把
display: flex直接加在body上——它会干扰浏览器对视口高度的解析 -
.app-header和.app-body是.app的直接子元素，天然按 column 排列
.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，表格高度超长时无法滚动，或者面包屑被挤出视口。
-
.app-main（内容区）自身设display: flex; flex-direction: column; -
.app-breadcrumb和.app-content是它的直接子项，自然纵向排列 -
.app-content要加flex: 1; overflow: auto; min-height: 0;才能真正撑满并可滚动 - 若里面放表格，表格的直接父容器还得加
height: 100%;，否则overflow不触发
移动端切换不能靠 display: none
单纯在媒体查询里给侧边栏加 display: none，会导致内容区突然变宽但内部子项未重排，卡片间距错乱、按钮换行异常。
- 保持 DOM 结构不变，改
.app-body的flex-direction: column; - 侧边栏加
order: -1;，让它在小屏排到顶部 - 内容区加
order: 1;，自然下沉 - IE11 不支持
order，需降级为flex-direction: column-reverse;+margin-top模拟
最易忽略的是 min-height: 0 和 box-sizing: border-box：前者决定滚动是否生效，后者决定 padding 是否计入宽度——漏掉任何一个，整个双栏就“看起来正常，实际一交互就崩”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
