css实现上面div根据内容自动高度，下面的div自动铺满剩余高度

“加载更多”的功能，如果是监听某个dom元素来实现，你会怎么做？

我的设想是：
1、此dom元素要可滚动；
2、判断合适应该做“加载更多”的逻辑；

在我所做的项目中，引用了bootstrap框架，并且这个dom元素隐藏的还比较深。

    

    

        

        

            
 
            

                

                

                

                

                    

                    	这个元素的height才是可能会有10000px;        
                    
                
            
        
    

而我要监听的就是那个 #repos 的DOM元素

每一个父级都设置为height:100%，会造成body也出现滚动条（隐藏滚动条只是一个美观问题，不解决实际问题）。因为body是100%，nav是50px，那底下的div.app.container还是100%的，就会造成body出现滚动条。而我想要div.app.container是100%-50px。

那该如何用css实现上面div根据内容自动高度，下面的div自动铺满剩余高度？

试过了很多种方法，最后只能 flex+许多层 嵌套解决了；

body.enroll-repos {
    display: flex;
    flex-direction: column;

    .app {
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .row {
            flex-grow: 1;
            display: flex;

            .main {
                flex-grow: 1;
                display: flex;
                flex-direction: column;

                #repos {
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    overflow-y: scroll;
                }
            }
        }
    }
}

期待更合适的答案。。。