Html 溢出隐藏不适用于"；垂直对齐的底部“绝对定位外部div中的div

我的div有一个问题，它与div的底部垂直对齐

我的目标是创建一个“日志窗口”，在这里我可以从下到上显示消息。如果没有足够的空间，则顶部的消息应逐渐消失（溢出隐藏）

问题：

首先，不考虑高度，如果我在其中放置更多div，容器将增长并超过100px，正如您在jsfiddle（当前为116px）上的示例中看到的那样。 第二，如果我强制它到100px，它将削减底部div而不是顶部div。我想在底部看到最新的消息（7，6，5，…）

绝对位置的外侧div需要保持

为了更好地理解，我创建了一个JSFIDLE：

#通知{
位置：绝对位置；
左：4px；
顶部：4px；
z指数：100000000；
溢出：隐藏；
}
#通知.内容{
宽度：350px；
高度：100px；
填充：2×4×2×4×2；
背景色：#321d12；
框大小：边框框；
显示：表格单元格；
垂直对齐：底部对齐；
}
#通知.内容部{
字体大小：10px；
颜色：#efb718；
}

1.Lorem ipsum door sit amet，consetetur！
2.临时工、临时工和临时工！
3.Lorem ipsum dolor sit amet。洛雷姆·伊普苏姆·多洛·西特，康塞特·萨迪普斯卡·艾特，他是一名精英，他是一名不平凡的人！
4.坐吧，康塞特特！
5.我们的劳动和财富是巨大的！
6.我是临时工，我是工人！
7.阿梅特·洛雷姆·伊普苏姆·多洛尔坐着阿梅特，康塞图尔！

您可以这样做，也可以在

内容上使用
位置：绝对
，从底部开始


#通知{
位置：绝对位置；
宽度：100%；
顶部：1px；
顶部：4px；
高度：100px；/*在此处设置高度*/
溢出：隐藏；
}
#通知.内容{
位置：绝对位置；
底部：0；
左：0；
宽度：350px；
填充：2×4×2×4×2；
背景色：#404040；
颜色：白色；
字体系列：Arial；
框大小：边框框；
}
#通知.内容部{
字体大小：12px；
}

1.Lorem ipsum door sit amet，consetetur！
2.临时工、临时工和临时工！
3.Lorem ipsum dolor sit amet。洛雷姆·伊普苏姆·多洛·西特，康塞特·萨迪普斯卡·艾特，他是一名精英，他是一名不平凡的人！
4.坐吧，康塞特特！
5.我们的劳动和财富是巨大的！
6.我是临时工，我是工人！
7.阿梅特·洛雷姆·伊普苏姆·多洛尔坐着阿梅特，康塞图尔！
您可以这样做，也可以在
内容上使用
位置：绝对
，从底部开始


#通知{
位置：绝对位置；
宽度：100%；
顶部：1px；
顶部：4px；
高度：100px；/*在此处设置高度*/
溢出：隐藏；
}
#通知.内容{
位置：绝对位置；
底部：0；
左：0；
宽度：350px；
填充：2×4×2×4×2；
背景色：#404040；
颜色：白色；
字体系列：Arial；
框大小：边框框；
}
#通知.内容部{
字体大小：12px；
}

1.Lorem ipsum door sit amet，consetetur！
2.临时工、临时工和临时工！
3.Lorem ipsum dolor sit amet。洛雷姆·伊普苏姆·多洛·西特，康塞特·萨迪普斯卡·艾特，他是一名精英，他是一名不平凡的人！
4.坐吧，康塞特特！
5.我们的劳动和财富是巨大的！
6.我是临时工，我是工人！
7.阿梅特·洛雷姆·伊普苏姆·多洛尔坐着阿梅特，康塞图尔！
这正是我想要的。我也试过了，但不知怎么的，潜水艇没有堆叠起来。但它与您的解决方案配合使用！嗯，这正是我想要的。我也试过了，但不知怎么的，潜水艇没有堆叠起来。但它与您的解决方案配合使用！