回归css之-less实现左侧导航高度至少100%，右侧高度随内容自适应

1、如图，通用CMS布局，左侧导航，右侧有容，flex布局，嵌套在外层盒子中

     解决主要问题：当右侧高度高于一屏高度时，左侧导航也能自适应

 

2、HTML代码

<!-- 在外层盒子 -->
<div class="app-wrap">
    <!-- 左侧导航 -->
    <div class="left-nav-wrap">
    </div>
    <!-- 右侧内容 -->
    <div class="right-sustain-wrap">
    </div>
</div>

3、css(less)代码

// 最外层盒子
.app-wrap{
    position: relative;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    display: flex;
    // 左侧导航
    .left-nav-wrap{
      flex: 0 0 250px;
      width: 250px;
      min-height: calc(100vh);     
      background: rgb(0, 21, 41);
    }
    // 右侧内容
    .right-sustain-wrap{
        flex: 1;
        min-height: 300px;
    }
}