CSS中overflow-x属性不生效，无法隐藏屏幕外的移动端汉堡菜单

• 同时为html和body标签添加overflow-x: hidden属性，移动端浏览器单独对body设置该属性通常不会生效，可补充position: relative保证规则适配所有浏览器，修改对应媒体查询代码如下：

@media only screen and (max-width: 800px) {
    html, body {
        overflow-x: hidden;
        position: relative;
    }

    .nav-links {
        position: absolute;
        right: 0;
        height: 92vh;
        top: 70px;
        background-color: #3a345c;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    /* 其余CSS代码保持不变 */
}

• 检查.nav-links的父级容器：如果父容器没有设置position: relative，或者自身存在溢出属性冲突，会导致子元素的位移不受body的溢出规则限制，可给.nav-links的直接父元素也添加overflow-x: hidden属性。
• 排查页面其余溢出元素：如果存在其他宽度超出视口的元素（比如设置了100vw但未扣除滚动条宽度、或者 margin/padding 横向溢出），也会触发横向滚动。可以临时添加如下代码排查：

* {
    outline: 1px solid red;
}

添加后查看是否有元素边框超出屏幕宽度，对应调整即可。

• 该问题和Django后端框架无关，无需从后端层面排查。

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