本文旨在解决经典布局方案中，左侧菜单栏收缩，主页面无法跟随变化，右侧内容界面需要设置高度才能滚动问题
如下图： 若要实现下图所示，我们都会使用 “定位” 方式实现。当顶部高度变化，就需要我们调整内容高度。左侧栏变化就需要调整右侧宽度等。
如今: 我们可以使用flex方法实现这种布局方案，且无需使用定位方式，所有布局都是一边调整，另一边跟着一起变动，无需通过任何js实现, 更不需要设置高度。话不多说直接上代码：
以下代码直接新建一个html文件，粘贴进去就可以看到实际效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
<meta charset="UTF-8">
<title>经典布局</title>
</head>
<!--
本文重点：
flex-shrink为0表示不会被压缩，配合上height为0，flex为1一起就表示永远会占满剩下的区域，不会超出也不会被压缩
-->
<style>
body,
html {
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
/* 垂直布局 */
flex-direction: column;
}
.header {
height: 50px;
width: 100%;
background: #929292;
}
.context {
flex: 1;
/* 第一种： 设置flex-shrink为0，设置height为0 */
/* 第二种： 设置overflow: scroll */
flex-shrink: 0;
height: 0;
/*overflow: scroll;*/
width: 100%;
display: flex;
}
.aside {
height: 100%;
width: 200px;
overflow: auto;
}
.menu {
height: 100px;
background: #ccc;
border: 5px solid #ddd;
}
.main {
flex: 1;
/* 方式一 设置flex-shrink为0，设置width为0 */
/* 方式二 设置overflow: scroll */
flex-shrink: 0;
width: 0;
/*overflow: scroll;*/
display: flex;
flex-direction: column;
}
.breadcrumb {
height: 50px;
padding: 10px 50px;
}
.myapp {
flex: 1;
overflow: auto;
}
.page {
width: 2000px;
height: 2000px;
padding: 10px;
border: 5px dashed gray;
}
</style>
<body>
<div class="container">
<div class="header">顶部菜单</div>
<div class="context">
<div class="aside">
<div class="menu">菜单1</div>
<div class="menu">菜单2</div>
<div class="menu">菜单3</div>
<div class="menu">菜单4</div>
<div class="menu">菜单5</div>
<div class="menu">菜单6</div>
</div>
<div class="main">
<div class="breadcrumb">面包屑/标题栏</div>
<div class="myapp">
<div class="page">可随意拖动的内容区域</div>
</div>
</div>
</div>
</div>
</body>
</html>上面的布局方案主要是要理解flex-shrink为0表示不会被压缩，配合上height为0，flex为1一起就表示永远会占满剩下的区域，不会超出也不会被压缩。这样不用使用定位方式可以轻松实现这种布局，当然也可以用在移动端，例如现在的饿了么，美团外卖等这种类型的布局，直接可以通过上面代码实现。
知识点:
flex: 1; 它其实是一个缩写，等价于flex: 1 1 0%; 即:
flex-grow : 1;
flex-shrink : 1;
flex-basis : 0%;- flex-grow 表示当有剩余空间的时候，分配给项目的比例
- flex-shrink 表示空间不足的时候，项目缩小的比例
- flex-basis 表示分配空间之前，项目占据主轴的空间
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。