为父div添加overflow:auto后影响子ul元素宽度的技术求助

问题核心 #

父容器#mainmenu为position: sticky定位容器，内部绝对定位的子菜单#menu会相对它定位。给#mainmenu添加overflow-y: auto后，超出父容器范围的子菜单会被裁剪，无法完整显示。

两种可行方案 #

方案1：修改子菜单定位方式（无需调整HTML结构） #

直接将子菜单改为固定定位，脱离父容器的overflow限制：

修改#menu的CSS代码：

#menu {
  visibility: hidden;
  z-index: 99;
  white-space: nowrap;
  margin-top: 0; /* 移除负margin，改用top精准定位 */
  position: fixed; /* 改为固定定位，相对于视口 */
  left: 50px; /* 与父容器宽度一致，保证对齐 */
  top: 0;
  width: 300px;
  padding: 0px 25px 0px 0px;
  background: white;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0s cubic-bezier(0.77, 0.2, 0.05, 1);
}

此时#mainmenu的overflow-y: auto可正常保留，固定定位的子菜单不受父容器的overflow属性限制，不会被裁剪。

方案2：拆分滚动容器与菜单容器 #

如果需要保持子菜单与父容器的文档流关联，可拆分结构，让滚动仅作用于父容器内的内容区域：

修改后的HTML结构：

<div id="mainmenu" class="parentmenu">
  <!-- 单独的滚动内容容器 -->
  <div class="menu-scroll-area" style="min-height: 831px; max-height: 831px; overflow-y: auto; overflow-x: hidden;">
    <!-- 菜单图标、动态加载的滚动内容放在此处 -->
  </div>
</div>
<!-- 子菜单移到父容器外部 -->
<ul id="menu">
  <li>菜单选项</li>
  <!-- 动态添加的元素 -->
</ul>

调整后的CSS代码：

#mainmenu {
  float: left;
  display: block;
  position: sticky;
  left: auto;
  z-index: 950;
  -webkit-user-select: none;
  user-select: none;
  min-height: 100vh;
  max-height: 100%;
  background: black;
  width: 50px;
  /* 移除父容器的overflow设置 */
}

/* 滚动区域样式 */
.menu-scroll-area {
  width: 100%;
  height: 100%;
}

#mainmenu input:checked ~ #menu {
  transform: none;
  background: black;
  margin-left: 49px;
  visibility: visible;
  height: 100%;
}

#menu {
  visibility: hidden;
  z-index: 99;
  white-space: nowrap;
  margin-top: -18px;
  position: absolute;
  left: 50px; /* 与父容器对齐 */
  top: 0;
  width: 300px;
  padding: 0px 25px 0px 0px;
  background: white;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0s cubic-bezier(0.77, 0.2, 0.05, 1);
}

原理说明 #

• 固定定位（position: fixed）的元素脱离文档流，相对于浏览器视口定位，不受任何父容器的overflow属性限制，因此不会被裁剪。
• 拆分滚动容器后，父容器不再设置overflow，仅内部滚动区域处理滚动逻辑，子菜单相对于外层容器定位，自然不会被父容器边界限制。

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