当父高度以百分比设置时，不计算子高度

Question

我有一个HTML代码，如下所示：

<div id="menu_bg">
    <div class="menu_possitioner">
        <div class="menu-main-menu-container">
            <ul id="menu-main-menu" class="menu">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</div>

相应的CSS看起来像这样：

#menu_bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    display: table;
}
.menu_bg .menu_possitioner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    padding: 0;
    height: 100%;
}
. menu_bg.menu_possitioner .menu-main-menu-container {
    width: calc(100% - 60px);
    max-width: 440px;
    max-height: calc(100% - 250px);
    margin: 0 auto;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 30px;
}
. menu_bg.menu_possitioner .menu-main-menu-container ul {
    list-style: none;
    padding-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

这基本上是一个类似灯箱的菜单，其想法是<ul>不应高于100％-250px，并且如果列表中的项目需要更多空间，则允许用户滚动。

这在Chrome中运行良好，但在Firefox上似乎不起作用，除非我将.menu_possitioner设置为px中的特定高度而不是百分比。问题是我真的需要这个百分比（100％），因为它需要覆盖整个屏幕，无论它的大小。