Html 两个div-一个固定高度，另一个填充剩余空间

我有两个div：一个具有静态高度，另一个用于填充父对象的其余空间。父div获取动态高度。在本例中，我将其设置为

100px

，但它可以是

200px

或

300px

。

绿色部分溢出到
蓝色部分。我增加了页边空白以显示溢出。我希望它只填充到父边界，不需要任何滚动条。我不知道如何摆脱这个15像素的家长出界。谢谢你的帮助


.container{
宽度：100%；
高度：100px；
背景：蓝色；
位置：相对位置；
}
.儿童1{
位置：绝对位置；
排名：0；
高度：15px；
宽度：100%；
背景：红色；
}
.儿童2{
位置：绝对位置；
顶部：15px；
身高：100%；
宽度：100%；
左边距：5px；
背景：绿色；
}
您可以使用上/左/右/下值使框填充父对象，而不是使用
宽度：100%；身高：100%；左边距：5px



请使用flexbox


.p{
显示器：flex；
弯曲方向：立柱；
最小高度：150px；
边框：1px纯红；
}
c{
高度：15px；
背景颜色：黄色；
}
博士{
柔性生长：1；
背景颜色：绿色；
}

Lorem ipsum dolor sit amet，奉献精英。官方错误，执行“同一权利”和“同一权利”的规定，并将“同一权利”视为“权利”和“权利”的一部分。
不确定我是否正确处理了您的问题，但我的尝试如下：

<div style="width: 100%; height: 100px; background: blue; position: relative; overflow:hidden">
    <div style="position: absolute; top: 0px; height: 15px; width: 100%; background: red"></div>
    <div style="position: absolute; top: 15px; height: 100%; width: 100%; margin-left: 5px;background: green"></div>
</div>


定义
儿童2的高度和宽度如下：

height: calc(100% - 15px);
width: calc(100% - 5px);


.container{
宽度：100%；
高度：100px；
背景：蓝色；
位置：相对位置；
}
.儿童1{
位置：绝对位置；
排名：0；
高度：15px；
宽度：100%；
背景：红色；
}
.儿童2{
位置：绝对位置；
顶部：15px；
高度：计算（100%-15px）；
宽度：计算（100%-5px）；
左边距：5px；
背景：绿色；
}

希望这有帮助


.container{
宽度：100%；
高度：100px；
背景：蓝色；
位置：相对位置；
}
.儿童1{
位置：绝对位置；
排名：0；
高度：15px；
宽度：100%；
背景：红色；
}
.儿童2{
位置：static；//浏览器默认位置为static不需要
顶部：15px；
身高：100%；
宽度：100%；
左边距：5px；
背景：绿色；
}

谢谢，从未使用过“calc”。移动设备是否支持此功能