使用overflow:hidden隐藏垂直滚动条，部分内容需不受overflow限制

当给容器设置overflow-x: auto; overflow-y: hidden;禁用垂直滚动时，内部脱离文档流定位的下拉菜单会因父容器的overflow属性被截断，比如你示例里编号4的文本无法完整显示。下面是几种实用的解决办法：

方法1：将下拉菜单移出overflow限制的父容器 #

父容器的overflow规则仅对其内部DOM元素生效，把下拉菜单的DOM结构挪到父容器外面，就能避开截断问题。

• 结构调整示例：

  <!-- 原结构 -->
  <div class="scroll-container" style="overflow-x:auto; overflow-y:hidden;">
    <button class="dropdown-trigger">展开下拉</button>
    <div class="dropdown-content">菜单1<br>菜单2<br>菜单3<br>菜单4</div>
  </div>
  
  <!-- 修改后结构 -->
  <div class="scroll-container" style="overflow-x:auto; overflow-y:hidden;">
    <button class="dropdown-trigger">展开下拉</button>
  </div>
  <div class="dropdown-content" style="position:absolute;">菜单1<br>菜单2<br>菜单3<br>菜单4</div>
  

• 定位处理：给触发按钮设置position: relative;，下拉菜单用position: absolute;基于按钮位置定位（比如top: 100%; left: 0;），确保两者对齐。

方法2：调整父容器的overflow属性 #

如果不需要完全隐藏父容器的垂直溢出，可直接修改overflow属性：

.scroll-container {
  overflow-x: auto;
  overflow-y: visible; /* 替换原有的overflow-y:hidden */
  position: relative; /* 作为下拉菜单的定位上下文 */
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
}

这种方式简单直接，现代浏览器均兼容，且父容器不会出现垂直滚动条。

方法3：用clip-path替代overflow:hidden #

clip-path可裁剪元素显示区域，但不会限制绝对定位子元素的溢出，适合必须保留父容器“垂直无滚动”视觉效果的场景：

.scroll-container {
  overflow-x: auto;
  /* 移除overflow-y:hidden */
  clip-path: inset(0 0 0 0); /* 裁剪区域与容器一致 */
  position: relative;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
}

该方法能达到和overflow-y:hidden类似的视觉效果，同时让下拉菜单正常显示。

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