Css 添加弹出菜单后，其余内容消失，溢出-x:hidden不起作用

添加弹出菜单后，“main”中的内容消失，主体的

overflow-x:hidden

不起作用。有人知道为什么吗

const幻灯片=（）=>{
const burger=document.querySelector（“.burger”）；
const menu=document.querySelector（“.menu”）；
const links=document.queryselectoral（“.menu div”）；
//切换菜单
burger.addEventListener（“单击”，（）=>{
menu.classList.toggle（“menupop”）；
})
}
幻灯片（）
*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体大小：calc（16px+0.25vw）；
溢出：滚动；
字体系列：“Antic Slab”，衬线；
}
身体{
最小高度：100vh；
溢出x：隐藏；
}
主要{
显示：网格；
宽度：100vw；
网格模板列：50%50%；
网格模板行：50%50%50%50%；
}
标题{
网格柱：1/3；
网格行：1/2；
背景颜色：粉红色；
}
#玫瑰{
网格柱：1/2；
网格行：2/3；
背景色：热粉红色；
}
#玫瑰img{
网格柱：2/3；
网格行：2/3；
背景色：rgb（134184204）；
}
#树{
网格柱：1/3；
网格行：3/4；
背景色：蓝绿色；
}
#关于我们{
网格柱：1/2；
网格行：4/5；
背景颜色：浅珊瑚；
}
#联系我们{
网格柱：2/3；
网格行：4/5；
背景颜色：橙色；
}
.汉堡{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐内容：周围的空间；
宽度：50px；
高度：50px；
光标：指针；
显示：无；
}
.line1，
.line2，
.line3{
弹性：1；
宽度：80%；
身高：5%；
背景：黑色；
边界半径：5px；
盒影：1px 1px灰色；
过渡：全部。5s轻松进出；
}
.a{
变换：translateY（2px）；
}
.b{
transform:translateY（-2px）；
}
导航{
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
高度：50px；
背景色：rgb（245249250,0.5）；
填充物：5px10px；
位置：粘性；
排名：0；
}
保险商实验室{
显示器：flex；
列表样式：无；
证明内容：周围的空间；
宽度：40%
}
李阿{
文字装饰：无；
颜色：灰色；
}
.标志{
字体系列：“意大利语no”，草书；
右边距：自动；
字体大小：30px；
字体大小：粗体；
}
.菜单{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
背景色：rgba（91126172,0.5）；
高度：100vh；
宽度：50vw；
位置：绝对位置；
顶部：50px；
右：0；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
梅努普先生{
转化：translateX（0%）；
}
.menupop分区{
动画名称：menuFade；
动画持续时间：1s；
动画延迟：2s；
动画计时功能：轻松；
动画填充模式：正向；
}
.菜单部{
宽度：100%；
身高：20%；
背景色：rgb（245249250,0.6）；
边缘底部：1px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
转化：translateX（100%）；
}
.菜单a组{
文字装饰：无；
}
@关键帧菜单{
从{
转化：translateX（100%）；
}
到{
转换：translateX（0px）；
}
}
@仅介质屏幕和（最大宽度：600px）{
保险商实验室{
宽度：60%；
}
}
@仅介质屏幕和（最大宽度：430px）{
.汉堡{
显示器：flex；
}
保险商实验室{
显示：无；
}
}

标志





在CSS中，删除
溢出：滚动

这将防止侧菜单超出视口宽度，因为使用
overflow:scroll，您允许浏览器将您的侧菜单移出视图，使其只能通过滚动访问

我还想补充一点，你的侧菜单过渡太长了。
如果你从用户体验的角度来考虑，用户可能会认为你的网站很慢。
我已将
转换缩短为200ms，并删除了
动画持续时间
和
动画延迟
。现在它对用户的反应似乎更灵敏了

编辑：还有人觉得奇怪吗？当您在Stackoverflow上使用“Run Snippet”时，使用完整页面视图，然后尝试将其缩小到移动宽度，媒体查询无法正常工作？当我在VSCode中运行代码并启动一个实时服务器时，它工作得很好，但是由于某些原因，Stackoverflow的运行代码段出现了错误

编辑2:我已将内容添加到您的每个
div
标签和
部分
标签中。因此，在
main
标记下看不到任何内容的原因是，默认情况下，所有容器（
div
、
section
、
main
和
header
标记）的高度都是
auto
。如果
height
为
auto
，则容器将根据容器内的内容缩小或增大。在您的情况下，您的任何容器中都没有内容，因此所有容器都不可见，它们基本上处于0px高度

现在我已经添加了内容，您可以看到您的容器了


const幻灯片=（）=>{
const burger=document.querySelector（“.burger”）；
const menu=document.querySelector（“.menu”）；
const links=document.queryselectoral（“.menu div”）；
//切换菜单
burger.addEventListener（“单击”，（）=>{
menu.classList.toggle（“menupop”）；
})
}
幻灯片（）
*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体大小：calc（16px+0.25vw）；
字体系列：“Antic Slab”，衬线；
}
身体{
最小高度：100vh；
溢出x：隐藏；
}
主要{
显示：网格；
宽度：100vw；
网格模板列：50%50%；
网格模板行：50%50%50%50%；
}
标题{
网格柱：1/3；
网格行：1/2；
背景颜色：粉红色；
}
#玫瑰{
网格柱：1/2；
网格行：2/3；
背景色：热粉红色；
}