绝对定位容器内实现可滚动列表的问题排查

你的代码里有两个关键问题导致滚动功能失效：

1. ul的overflow设为visible（默认值），内容超出容器时只会向外溢出，不会触发滚动
2. 虽给ul设置了max-height，但未配合正确的溢出规则，同时div的max-height限制了容器高度，进一步压缩了列表的可显示空间

以下是修正后的完整代码：

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

<style>
div {
  position: absolute;
  top: 50px;
  border: 1px solid red;
  /* 若要让列表的200px max-height完全生效，建议移除该max-height，或设置为≥200px+边框高度 */
  /* max-height: 100px; */
}

div ul {
  /* 移除无必要的relative定位 */
  /* position: relative; */
  max-height: 200px;
  border: 1px solid green;
  /* 核心修改：设置overflow为auto，内容超出时自动显示滚动条 */
  overflow: auto;
  /* 可选：重置ul默认边距，避免内部空间被挤压 */
  margin: 0;
  padding: 0;
}

/* 可选：优化列表项样式，提升可读性 */
div ul li {
  padding: 4px 8px;
  list-style: none;
}
</style>

核心修改说明： #

• 将ul的overflow: visible改为overflow: auto：这是触发滚动的关键，当内容高度超过max-height时，会自动生成垂直滚动条
• 移除ul的position: relative：此处无特殊定位需求，该属性反而可能干扰布局
• 调整div的max-height：若需列表的200px高度完全生效，需确保容器高度不小于列表的最大高度（含边框、内边距等）

内容的提问来源于stack exchange，提问作者Felix Mühlenhoff