问不同浏览器上的滚动条行为

EN

假设我们有两个<div>元素，一个是父元素，另一个是子元素。是否有一种方法可以使父<div>只能在Chrome上滚动，而只有子<div>可以在FireFox上滚动？

这听起来可能有点奇怪，但这是我真正需要在我的项目上实现的东西，因为FireFox在这个问题上表现得非常奇怪。

提前谢谢。

更新：

下面是我提到的项目的简化描述。

我打算设计一个带有页面转换的个人HTML模板。因此，当用户单击菜单项时，每个页面都会显示/隐藏一个过渡效果。

我用的是一个非常简单的过渡效果，我自己写的。因此，<div id="main">是父级，有些<div class="inner-page">是子级。不用说，根据它们的内容，每个.inner-page都有不同的高度。

对于#main，我设置了overflow-y: scroll;。在Chrome上，它工作得完美无缺。因此，在显示每个.inner-page之后，滚动条的长度将根据活动页面的高度进行更新。

然而，在FireFox上，情况就不同了。滚动条的长度不会改变，而且始终是一样的，这是根据页面的长度，其中有最多和最长的内容。因此，当其他页面(内容较少)处于活动状态时，活动页面底部总是有一个巨大的空可滚动区域。

我尝试过的另一种解决方案(行之有效)是为overflow-y: scroll;设置.inner-page而不是#main，以解决滚动条长度问题。但是我不得不隐藏滚动条，因为每次页面转换时，滚动条也会随页面而来，这看起来一点也不太好。

按照这个CodePen链接查看我的代码的简化版本，以及滚动条在Chrome和FireFox上的不同行为。