汉堡菜单设置overflow-y: auto后仍无法滚动该如何解决？

AI 小北

2026-9-29

问题原因

样式优先级冲突：你在自定义CSS中给.menu__box设置了display: block，但HTML里给该元素加了Bootstrap的d-flex flex-column类，Bootstrap类优先级更高，该元素实际以flex布局渲染，未正确配置溢出规则的flex容器，内容超出时不会触发滚动
高度计算异常：你给菜单设置了height: 100%，fixed定位元素使用百分比高度容易出现计算偏差，同时菜单配置的顶部边框、上下内边距会在默认盒模型下叠加到总高度上，导致菜单实际高度超过视口高度，超出部分直接被裁剪
未限制最大高度：没有明确约束菜单的最大高度不超过可视窗口，即使设置了overflow-y: auto也无法触发滚动

修复方案

修改.menu__box的CSS规则即可，调整后的代码如下：

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  left: -100%;
  width: 300px;
  /* 替换原height:100%，限制最大高度为视口高度，加盒模型规则避免边框内边距撑大盒子 */
  max-height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
  border-right: 1px solid black;
  border-top: 1px solid black;
  overflow-y: auto;
  transition-duration: 0.25s;
}

如果调整后还是不生效，可以直接删掉HTML中.menu__box元素上的d-flex flex-column类，避免flex布局和自定义样式冲突。