如何仅通过CSS限制相对定位menuList高度不超出容器/视口且最大300px

不需要改HTML结构、不需要加JS，仅调整CSS即可满足所有约束，适配所有主流浏览器。 #

具体实现代码 #

1. 先给边界容器.myElement补定位上下文，让内部绝对定位的菜单以它为定位基准，同时满足容器本身不出现滚动条的要求：

.myElement {
  /* 原有样式全部保留，新增以下2行 */
  position: relative;
  overflow: clip;
}

兼容提示：如果需要适配Chrome 86以下的旧版本浏览器，把overflow: clip换成overflow: hidden即可。

2. 调整绝对定位的.menu样式，原有position: absolute和业务设置的top/left/z-index等定位属性全部保留不动，新增下边界约束，让菜单自动不超出容器底部：

.menu {
  /* 原有样式全部保留，新增以下3行 */
  bottom: 0;
  height: fit-content;
  max-height: 100%;
}

兼容提示：旧版本浏览器可以把height: fit-content换成height: auto，效果完全一致。
原理说明：绝对定位元素同时设置了顶部偏移（你原有业务写的top值）和bottom: 0时，浏览器会自动把元素的可占用高度限制在「顶部偏移位置 → 容器底部」的区间内，根本不需要手动计算top偏移量，元素自然不会溢出容器下边界。

3. 最后调整.menuList的最大高度规则，用CSSmin()函数同时满足「最大高度不超过300px」和「不溢出容器」两个要求：

.menuList {
  /* 原有position: relative等样式保留，修改/新增以下2行 */
  max-height: min(300px, 100%);
  overflow-y: auto;
}

效果验证 #

• 当容器剩余高度（.myElement总高度 - .menu的top偏移值）大于300px时，menuList最大高度取300px，符合设计预期
• 当容器剩余高度小于300px时（比如小屏设备、菜单弹出位置靠下），menuList最大高度自动适配为剩余可用高度，不会溢出.myElement，也不会导致页面出现滚动条
• 所有修改仅涉及CSS，完全不侵入原有业务逻辑，符合仅能修改样式的权限要求

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