如何让盒子占满剩余高度???

```html

<div class="detail">

    <div class="header">

    </div>

    <div class="aside-main">

    </div>

</div>

```

如上方html所示 我们要让aside-main占满剩余高度 

但是我们有以下问题要解决: 

1. 由于我们这个页面是路由页面在<app-main/>中,然而<app-main/>又设置了min-height导致子元素无法继承到父元素height;

所以我们这样来写: 

1. 为<app-main>添加相对定位

2. 为<div class="detail">添加绝对定位并且添加height: 100%

3.将<div class="detail">拉伸为100%宽度(否则可能会变形)

4. 为<div class="detail">添加flex布局并且设置flex-direction: column;

5.拉伸<div class="aside-main">添加flex:1

```scss

 .detail {
    display: flex;
    flex-direction: column;
    position: absolute;//父元素添加相对定位子元素添加绝对定位后就能继承高度了 

    height: 100%;
    right: 0;//拉伸<div class="aside-main">    

    left: 0;//拉伸<div class="aside-main">  

    .header {

        height: 50px

    }

    .aside-main {
     flex: 1;

    }

}

```