为何给下拉列表项设置overflow-x:hidden会导致垂直重叠

选项垂直重叠和父容器的overflow-y: auto无关，核心是两个问题：

1. text-overflow: ellipsis属性缺少必要生效条件，你只配置了overflow-x: hidden，没有强制文本单行，长文本折行后和overflow属性触发的BFC渲染规则冲突，导致按钮元素高度计算异常
2. flex列布局下的按钮子项默认允许被压缩，没有做高度防缩约束，内容加载时就会出现挤压重叠。

直接修改.result类的样式，补全3个属性即可，不需要改动现有父容器的滚动逻辑：

.result {
    transition: background 0.125s;
    padding: 0.5rem 1rem;
    color: black;
    background: none;
    text-align: left;
    overflow-x: hidden;
    text-overflow: ellipsis;
    /* 新增以下3个属性 */
    white-space: nowrap;
    width: 100%;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
}

• white-space: nowrap：强制选项内文本不换行，是省略号截断效果生效的必要前提，避免长文本折行撑乱布局
• width: 100%：约束选项宽度和下拉容器宽度完全一致，避免长文本把按钮宽度撑出容器范围
• flex-shrink: 0：禁止flex子项在空间不足时被压缩高度，彻底解决选项被挤扁导致的垂直重叠问题

修复后两个需求可同时正常运行：

• 选项总高度超过下拉容器设置的max-height: 22rem时，自动出现垂直滚动条
• 选项文本长度超过容器宽度时，自动截断并在末尾显示省略号，无横向溢出

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