设置父容器overflow:hidden无法隐藏下拉菜单，该如何实现需求？

该问题通常是定位规则、层级结构或者CSS属性冲突导致的溢出裁剪失效，可按照以下场景逐一排查修复：

• 父容器未设置非static定位属性
  如果你的下拉菜单使用了position: absolute或position: fixed定位，默认它的溢出判定会相对于最近的设置了relative/absolute/fixed/sticky定位的祖先元素，若父容器是默认的position: static，它的overflow: hidden不会作用到下拉菜单。
  解决方法：给父容器添加position: relative属性即可。
• 存在中间层级容器未设置溢出裁剪
  如果下拉菜单不是父容器的直接子元素，中间层级的容器高度超出父容器但本身没设置overflow: hidden，父容器的裁剪规则也无法作用到内层的下拉菜单。
  解决方法：给所有中间层级容器同步添加overflow: hidden，或者调整结构让父容器成为下拉菜单的直接定位父级。
• 仅设置了单轴overflow属性
  部分浏览器下如果只单独设置overflow-x: hidden或overflow-y: hidden，另一轴默认值为visible，可能导致裁剪失效。
  解决方法：直接给父容器设置overflow: hidden同时覆盖双轴规则，或者明确设置对应需要裁剪的轴属性。
• 存在触发层叠上下文的属性冲突
  如果下拉菜单或者父容器设置了transform、filter、will-change等会触发独立层叠上下文的属性，会改变元素的定位基准和溢出判定范围，导致裁剪失效。
  解决方法：移除不需要的层叠上下文触发属性，或者将overflow: hidden设置在触发层叠上下文的那一层容器上。

正确代码示例 #

/* 父容器样式 */
.menu-wrapper {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 50px;
}

/* 下拉菜单样式 */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者João Pedro