我需要一個這樣的布局

于是我使用了flex布局

但是我的自適應(yīng)高度沒有效果

html

 <div class="container">
    <div class="header" style="background-color:#333;">Header</div>
    <div class="div-box">
      <div class="aside"  style="background-color:#666;">Aside</div>
      <div class="content" style="background-color:#999;">Main</div>
    </div>
  </div>
  

css

<style scoped lang="scss" type="text/scss">
  .container{
    color: #fff;
    display: flex;
    flex-direction:column;
    .header{
      height: 60px;
    }
    .div-box{
      flex: 1;
      display: flex;
      .aside{
        width: 200px;
      }
      .content{
        flex: 1;
      }
    }
  }
</style>

我的div-box里面的左側(cè)固定寬度，右側(cè)自適應(yīng)寬度是有效的。但是自適應(yīng)高度的不行

不知道為什么

目前我的頁面是這樣子

=======================================
可以了
我好像是沒有設(shè)置container的高度

把樣式改成

<style scoped lang="scss" type="text/scss">
  #layout{
    height: 100%;
  }
  .container{
    color: #fff;
    display: flex;
    flex-direction:column;
    height: 100%;
    .header{
      height: 60px;
    }
    .div-box{
      flex: 1;
      height: 100%;
      display: flex;
      .aside{
        width: 200px;
      }
      .content{
        flex: 1;
      }
    }
  }
</style>