css div充满div,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;

}

}

}

}

}

期待更合适的答案。。。