Html 如何扩展div以覆盖父容器中的可用空间？

假设我有一个div容器，该容器由第三方JavaScript代码动态调整大小

<div class="container">
    <div class="header">
        ...some content...
    </div>

    <div class="body">
        ...body content...
    </div>
</div>

…一些内容。。。
…正文内容。。。

有没有CSS方法可以让body div扩展父容器的所有可用水平和垂直空间

---

请注意，我无法在header div上设置任何固定高度，因为它的内容是动态生成的，并且它并不总是相同的高度。

如果高度已知，flexbox可以这样做

.container {
    display: flex;
    flex-direction: column;
    height: 150px; /* or whatever including % values */
}

.header {
    background: plum;
}

.body {
    flex:1
}

.container{
显示器：flex；
弯曲方向：立柱；
高度：150像素；
边缘底部：10px；
}
.标题{
背景：李子；
}
.身体{
背景：#c0ffee；
弹性：1
}

Lorem ipsum dolor sit amet，奉献精英。以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义，以个人名义。康斯昆特！
Lorem ipsum dolor sit amet

即使容器高度未知/未明确设置，也可以这样做：

.container{
宽度：348px；/*模拟由JavaScript设置的随机值*/
边框：1px纯黑；/*此处仅用于演示*/
显示器：flex；
弯曲方向：立柱；
-webkit柔性方向：列；
}
.身体{
背景：番茄；
身高：100%；
}

…一些内容。。。
…正文内容。。。


更多
一段话

jsFiddle将更容易帮助您并更好地理解您想要实现的目标。容器的高度是否已知？header

float:left

body

height:100%；宽度：100%

？？？

高度：扩展元件上的100%

。有趣。好把戏。@Paulie\u谢谢；我先尝试了你的方法（

flex:1；

），但我认为我试图将flex方向放在错误的元素上。所以我一直在寻找另一种方法，因为我无法找出我的错误