如何将动态高度UL定位在动态高度容器底部，溢出时优先隐藏旧列表项

解决方案 #

你不需要用绝对定位实现该效果，使用Flex布局即可完美匹配所有需求，HTML代码无需修改，替换为以下CSS即可：

/* 先重置ul默认样式，避免默认边距干扰高度计算 */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#list_container {
  max-height: 100px;
  overflow: hidden;
  /* 核心配置：弹性布局+内容靠底部对齐 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

实现逻辑说明 #

• 取消ul的绝对定位后，容器可以被ul的内容正常撑开，不会出现高度塌陷问题
• 容器的Flex配置保证内部ul始终贴在容器底部
• 当列表为空时容器高度自动为0，上下相邻元素会自然贴合，没有多余空白
• 列表项增加时容器高度会随内容同步增长，直到达到max-height阈值
• 内容高度超过max-height后，容器高度固定为阈值大小，超出的顶部旧列表项会被自动隐藏，底部新添加的列表项始终保持可见

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