Html 将最后一个子项展开到父项的底部

我有一个div容器，里面有孩子

<div id="parent">
    <div class="child"></div>
    <div class="child"></div> 
    <div class="child"></div>
    <div class="child" id="last-child"></div>      
</div>

---

我想将最后一个子元素拉伸到父元素的底部（它必须填充从子元素到父元素底部的可用空间）。

使用

display:flex将父元素变成一个灵活的框

和

flex--direction

为

列

。接下来给最后一个子元素

flex:1

#父级{
最小高度：500px；
显示器：flex；
弯曲方向：立柱；
}
#最后一个孩子{
弹性：1；
背景：蓝色；
}
.孩子{
背景：红色；
}

jljlkj
kjlkjl
kljlkjlhi
您可以使用flexbox进行此操作（添加背景色以增加可见性）：


#父级{
最小高度：500px；
显示器：flex；
弯曲方向：立柱；
背景：#999；
}
.孩子{
背景：#eee；
}
#最后一个孩子{
柔性生长：1；
背景：#美国联邦航空局；
}

1.
2.
3.
4.
我希望我能给出第二个正确答案。也谢谢你。你也可以投赞成票……我投了赞成票，但我刚刚注册。
#parent {
   min-height: 500px;
}