如何让proceed-msg div始终处于可滚动parent div的内容最末尾？

问题根因 #

你当前使用的position: absolute是相对于设置了position: relative的父容器可视区域进行定位的，无论父容器内的内容长度如何，该元素都会固定在父容器的可视底部，内容超出父容器高度时自然会出现遮挡问题。

推荐实现方案（Flex布局，无需修改HTML结构） #

直接修改CSS配置即可满足需求：内容较少时提示栏靠在父容器底部，内容较多时提示栏跟在所有内容的末尾，需要滚动到底部才能看到，不会遮挡上层内容。
修改后的CSS代码如下：

.parent {
    height: 300px;
    overflow-y: scroll;
    border: 2px solid black;
    width: 200px;
    /* 新增flex配置，删除原有的position: relative */
    display: flex;
    flex-direction: column;
}

.proceed-msg {
    /* 删除原有的position: absolute、bottom: 0配置 */
    margin-top: auto;
}

方案说明 #

margin-top: auto在flex纵向布局中会自动填充该元素上方的剩余空间：

• 当父容器内的内容总高度小于300px时，剩余空间会被填充，提示栏自然被推到父容器的底部
• 当父容器内的内容总高度大于300px时，没有剩余空间可以填充，提示栏就跟在所有消息内容的最后，随整体内容滚动

内容的提问来源于stack exchange，提问作者pece