CSS实现下拉菜单高度自适应且同时设置max-height为500px和80vh

问题原因 #

你写的两个同名max-height属性会触发CSS层叠规则，后声明的属性会直接覆盖前面的，所以永远只有一个规则生效，自然达不到取两者较小值的效果。

实现方法 #

这个需求完全可以用原生CSS实现，不需要额外JS逻辑，使用CSS比较函数min()即可实现需求：
min()函数会返回传入的多个参数中的最小值，刚好匹配你「取500px和80vh较小值作为最大高度」的要求，同时你原有代码里的height: auto已经满足「内容自动撑开高度」的要求。

修改后的完整代码 #

div {
   height: auto;
   max-height: min(500px, 80vh); /* 自动取两个值的较小值作为最大高度 */
   border: 1px solid red;
   overflow: auto; /* 建议替换原有的hidden，内容超过高度时出现滚动条，避免下拉项被截断无法查看 */
}

老浏览器兼容写法 #

如果需要兼容2020年之前发布的老旧浏览器（比如IE、早期Chrome/Edge版本），可以加兜底规则，老旧浏览器会自动忽略不识别的min()语法，使用兜底的最大高度：

div {
   height: auto;
   max-height: 500px; /* 老旧浏览器兜底规则 */
   max-height: min(500px, 80vh); /* 现代浏览器生效规则 */
   border: 1px solid red;
   overflow: auto;
}

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