Scrolling bug in Firefox

Question

I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.

Link here

A bit of the HTML:

<div class="full-menu">
  <div class="full-menu--middle">
    <button class="menu-toggle menu-toggle--close"></button>    
    <div class="section group menu_items">
        <ul>
            <li>a bunch of options vvv</li>
        </ul>
    </div>
  </div>
</div>

A bit of the CSS:

html,
body {
    height: 100%;
    width: 100%;
}


.main_menu {
    display: none;
}

.full-menu {
    visibility: hidden;
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
}

.full-menu--open {
    visibility: visible;
    opacity: 1;
}

.full-menu--middle {
    display: table-cell;
    vertical-align: middle;
}

.menu-toggle {
    background-color: transparent;
    border: 0;
    color: #fff;
    position: fixed;
    left: 20px;
    top: 20px;
}

.menu-toggle:before {
    content: '\f0c9';
    font-family: 'FontAwesome';
    margin: 0 20px 0 0;
}

.menu-toggle--close {
    position: fixed;
    top: 20px;
    left: 20px;
}

.menu-toggle_black {
    background-color: transparent;
    border: 0;
    color: #000;
    position: fixed;
    left: 20px;
    top: 20px;
}

.menu-toggle_black:before {
    content: '\f0c9';
    font-family: 'FontAwesome';
    margin: 0 20px 0 0;
}

.menu_items{
    overflow: scroll;
    height: 100%;
}

.page_inner_ {
  display: table-cell;
  vertical-align: middle;
}

.page_container {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    color: #ffffff;
}

Any help would be very much appreciated! Thanks

Answer 1

Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu .

Answer 2

Maybe you should give position: absolute; to .full-menu , instead of fixed .

Answer 3

How to Fix Overflow Issues in CSS Flex Layouts:

"... add min-height: 0; to the flex child that has our overflow container ..."

https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/