滑动汉堡菜单子元素<a>无法随父容器滑动问题求助

问题出在两处关键样式设置：

• .wrapper 未设置 overflow: hidden，导致容器宽度收缩为0时，内部元素依然溢出显示，无法跟随容器同步滑动隐藏。
• .BurgerContent 使用 position: absolute 并设置 margin: 2rem，脱离文档流后无法跟随父容器宽度变化移动，且margin会导致内容超出容器范围。

修改后的CSS代码 #

.wrapper {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    pointer-events: none;
    transition: 0.5s;
    overflow: hidden; /* 添加此行，隐藏容器溢出内容 */
}

.wrapper > .BurgerMenu {
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgb(190, 190, 190);
    transition: 0.5s;
    position: relative;
    z-index: 60;
    width: 100%;
}

.BurgerMenu > .BurgerContent {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative; /* 替换为relative，保持在文档流内 */
    flex-direction: column;
    box-sizing: border-box;
    padding: 2rem; /* 用padding替代margin，避免内容溢出 */
}

.BurgerMenu > .BurgerContent > a {
    color: black;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 1rem; /* 可选，给链接添加间距优化视觉 */
}

关键调整说明 #

1. overflow: hidden 确保 .wrapper 宽度变化时，内部所有元素会被容器边界裁剪，完全跟随容器滑动隐藏/展开。
2. 将 .BurgerContent 定位改为 relative，让它保持在父容器文档流中，宽度和位置随父容器同步变化；用 padding 替代 margin，配合 box-sizing: border-box 保证内容不会超出容器范围。
3. 可选添加 margin-bottom 给链接增加间距，提升菜单可读性。

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