Unable to scroll div within fixed div

Question

I'm experiencing problems with a menu containing a parent container which spreads over the entire site and a div with the actual content. Everything is okay as long as the device screen is big enough. But especially with mobile devices its not possible to show the entire content.

I've created a jsfiddle at http://jsfiddle.net/89xyzsfz/ to show the problem with a working sample and the needed js and css. On mobile devices just some of the parts are visible but it is not possible to scroll the content.

The relevant code itself explained:

            <div class="hiddenMenu jsMenu">
                <div class="menuContainer jsMenuContainer">
                    <h3>Menu content</h3>

                    <ul>
                        <li><a href="#item1">Item1</a></li>
                        <li><a href="#item2">Item2</a></li>
                        <li><a href="#item3">Item3</a></li>
                        <li><a href="#item4">Item4</a></li>
                        <li><a href="#item5">Item5</a></li>
                        <li><a href="#item6">Item6</a></li>
                        <li><a href="#item7">Item7</a></li>
                        <li><a href="#item8">Item8</a></li>
                        <li><a href="#item9">Item9</a></li>
                    </ul>
                </div>

                <div class="menuBackground jsMenuBackground"></div>
            </div>

• hiddenMenu holds the entire menu. At load the entire menu is hidden and enabled via clicking on an element with css class jsMenuButton assigned.
• menuContainer is the container with the content which should be scrollable when parts of it are not visible at the device.
• menuBackground is used for designing the background while showing the content with no specific function apart from that.

Answer 1

Change your css for .hiddenMenu .menuContainer to the following:

.hiddenMenu .menuContainer {
  position: relative;
  margin: 0 auto;
  text-align: center;
  z-index: 12;
  height: 100%;
  overflow: auto;
}

The .menuContainer needs to scroll the menu items and therefore requires the overflow:auto; , height:100% and needs to be positioned relative instead of absolute.

http://jsfiddle.net/89xyzsfz/5/

Hope that helps!

Answer 2

Simple Change Your Code to this CSS. The overflow is clipped, but a scroll-bar is added to see the rest of the content

.hiddenMenu {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top : 0;
    width: 100%;
    z-index: 10;
    overflow:scroll;
}

Overflow Values

visible: content is not clipped when it proceeds outside its box. This is the default value of the property

hidden: overflowing content will be hidden.

scroll: similar to hidden except users will be able to scroll through the hidden content

auto: if the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.

initial: uses the default value which is visible

inherit: sets the overflow to the value of its parent element.