html图片后边自动底部对齐,CSS怎么实现底部对齐？

效果说明：

1、红色区域数据需要倒排(即从底部开始数，数字为1、2、3、4、5)，并且显示在最底部

2、当数据过多时需要显示滚动条，**并且滚动条需要拉到最底部**

3、数据从websocket中推送过来，推送间隔为几十毫秒

4、需要兼容ie10及以上浏览器

使用flex布局实现

*{

margin:0;

padding:0;

box-sizing:border-box;

}

.container{

position:relative;

width:300px;

height:500px;

margin:10pxauto;

border:1pxsolid#f60;

color:#fff;

}

.top,

.bottom{

height:50%;

padding:20px;

}

.top{

background-color:#da2e22;

}

.top>ul{

width:100%;

height:100%;

overflow:auto;

}

.bottom{

overflow:auto;

background-color:#1e1e1e;

}

我是第1个li元素我是第2个li元素我是第3个li元素我是第4个li元素我是第5个li元素