Html 防止在模式打开时显示两个滚动条

在我的页面中，我有一个在单击按钮时打开的模式。但它看起来不稳定，因为出现了两个滚动条：

我使用的css：

我希望它在模式打开时只有模式的滚动条，在关闭时切换回父滚动条。我试着用

overflow-y:hidden

来做这件事，但那会禁用滚动

---

我在这里遗漏了什么？

当我在Codepen上看到你的项目时，没有显示两个滚动条

---

我认为你的浏览器有问题，但我不想隐藏滚动条，我的错。我想我明白你现在的意思了：）我想我的浏览器没有问题。但是我的页面加载的方式是，在第一次加载时，已经有很多内容，因此在父html上显示滚动条。然后当我点击模态时，它有它的内容和滚动条，然后它显示两个滚动条而不仅仅是模态