flex自适应布局

左边大小明确，右边自适应：

左边必须设置max-width，右边flex:1自适应剩余空间。

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;

  .left {
    max-width: 180px;
    background-color: #001529;
  }

  .right {
    flex: 1;
    background-color: #2074c3;
    }    
 }			

上边大小明确，下边自适应：

上边必须设置max-height，下边flex:1自适应剩余空间。

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .top{
    max-height: 50px;
    background-color: #001529;
  }

  .bottom{
    flex: 1;
    background-color: #2074c3;
    }    
 }