如何让Flexbox在Angular中正确填充剩余高度

Question

人们提出了很多关于让Flexbox div填充剩余高度的问题和答案，但它们都有些令人失望。

我希望得到一个div来响应地填充屏幕高度，并使背景变为绿色。我不想告诉css任何高度，我只是想让它填满可用空间。

我看到的每个解决方案都会在某个阶段恢复指定高度，我不想这样做，因为它在某些时候意味着滚动条或白色空格。

在Angular中对身体背景着色似乎更加复杂，如果我能帮助它，我不想弄乱我的主题，但这也是实现我想要的方式。它只是觉得应该有一种方法来告诉div填充浏览器窗口的其余部分，这真的让我烦恼。

HTML：

<div flex layout="column" class="outer">
    <div class="top">
        <span class="left-spacer"></span>
    <span class="page-header">
        HOME
    </span>
    </div>
    <div class="middle">
        <div class="middle-constrained">
            <img src="{{image}}">
        </div>
    </div>
    <div class="bottom">
        3
    </div>
</div>

CSS：

@import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade');


.outer {
    display: flex;
    flex-direction: column;
    background-color: #009999;
    min-height: 100%;

}

.top {
    flex: 1;
    order: 1;
    display: flex;
    flex-basis: 33%;
}

.middle {
    flex: 8;
    order: 2;
    display: flex;
    flex-basis: 33%;
}

.bottom {
    order: 3;
    flex: 1;
    flex-basis: 33%;
    background-color: #009999;
}

.left-spacer {
    flex: 7;
    background-color: #009999;
}

.page-header {
    padding: 0px;
    background-color:  #009999;
    flex: 1;
    height: 50px;
    font-family: 'Bungee', cursive;
    font-size: 2em;
    vertical-align: middle;
    color: #E1E3F3;
 }

 .middle {
    display: flex;
    overflow: auto;
 }

 .middle-constrained {
    flex: 1;
 }

 img {
    width:100%;
    height: 100%;
    }

我的网页顶部还有一个Angular Material Toolbar组件。