使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

本文旨在解决经典布局方案中，左侧菜单栏收缩，主页面无法跟随变化，右侧内容界面需要设置高度才能滚动问题

如下图：若要实现下图所示，我们都会使用 “定位” 方式实现。当顶部高度变化，就需要我们调整内容高度。左侧栏变化就需要调整右侧宽度等。

如今: 我们可以使用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一起就表示永远会占满剩下的区域，不会超出也不会被压缩。这样不用使用定位方式可以轻松实现这种布局，当然也可以用在移动端，例如现在的饿了么，美团外卖等这种类型的布局，直接可以通过上面代码实现。