如何实现浮动导航栏下方可滚动main div内容的遮挡裁剪？

我正在寻找一种可移植的布局解决方案，要求满足以下效果：

• 导航栏部分遮挡下方main容器内的内容
• main容器中的内容需超出自身边界被裁剪，从而在导航栏下方渲染
• main容器与导航栏不重叠，滚动条完全处于main容器范围内
• 内容被导航栏遮挡（模糊效果仅为示例演示）

我当前的解决方案是将导航栏覆盖在main容器上方，设置main容器的padding-top等于导航栏高度，元素结构与样式如下：

HTML结构 #

<div id="root">
  <div id="navbar"> ... </div>
  <div id="main"> ... </div>
</div>

CSS样式 #

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: NAVBAR_CLEARANCE;
  z-index: 1;
}

#main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: NAVBAR_CLEARANCE;
  z-index: 0;
}

该方案在支持-webkit-scrollbar选择器的浏览器中运行正常，但在Firefox等浏览器中无法达到预期效果。请问是否存在可移植的方案实现上述需求？

内容的提问来源于Stack Exchange，提问作者Christopher Madrigal