本文旨在解決經典佈局方案中，左側/頂部/麪包屑/菜單欄收縮，主頁面無法跟隨變化，右側內容界面需要設置高度才能滾動問題。（主頁面內容全自動）
如下圖： 若要實現下圖所示，我們都會使用 “定位” 方式實現。當頂部高度變化，就需要我們調整內容高度。左側欄變化就需要調整右側寬度等。
如今: 我們可以使用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 表示分配空間之前，項目佔據主軸的空間
