Css DIV中有两个DIV。如何用第二个DIV自动填充父DIV的空间？

请访问了解我的意思-

我有一个父DIV，其中有两个DIV按垂直顺序排列。 顶部DIV应仅具有其内容的高度，而底部DIV应占据父DIV的所有剩余空间，而与内容高度无关，并且也不应与父DIV重叠

HTML:

简而言之，“内部内容”应该占据“外部”DIV的所有剩余空间，没有重叠

你知道如何做到这一点吗

---

非常感谢您的帮助。

添加

显示：表格到父div和
显示：表行到子div

和
height:0
到第一个子div。这将采用自动高度

    html,body{
    height: 100%;
}
.outer{
    background-color:blue;
    height: 80%; border:red solid 2px;
    display: table;
     width:100%
}
.inner-title{
    background-color:red;
    display:table-row; 
     width:100%
}
.inner-content{
    background-color:grey;
    display:table-row;
    width:100%;
    height:100%
}

一种新的CSS方式是使用flexbox


/*QuickReset*/*{框大小：边框框；边距：0；}html，正文{高度：100%；}
.flex col{
显示器：flex；
弹性方向：列；/*或：弹性流：列换行*/
身高：100%；
}
.flex fill{/*将此类添加到要展开的元素中*/
弹性：1；
}

标题
内容
页脚
@sowmya。。设置第二个分区的最小高度如何？是否需要最小高度。Op希望div占据整个可用空间，这在他的问题中不是很好，因为第一个div的高度不是固定的so@Nirman这是因为我在第一个div中添加了更多内容来显示示例。检查更新的答案now@Sowmya：现在是否有更好的基于flexbox的解决方案？或者显示：表格仍然是实现这一点的唯一方法吗？比上一个更好的解决方案，imho
html,body
{
height: 100%;
}

.outer
{
    background-color:blue;
    height: 80%;
}

.inner-title
{
    background-color:red;
}

.inner-content
{
background-color:yellow;
    height: auto;
}

    html,body{
    height: 100%;
}
.outer{
    background-color:blue;
    height: 80%; border:red solid 2px;
    display: table;
     width:100%
}
.inner-title{
    background-color:red;
    display:table-row; 
     width:100%
}
.inner-content{
    background-color:grey;
    display:table-row;
    width:100%;
    height:100%
}