CSS Fixed Positioning and Scrollbar

Question

I have a navigation menu on my site which will transition to a full-screen slide-out menu whenever the user uses the site on a mobile device via media queries. However if the screen height is vertically too small to display the contents of the menu (eg wearables) I'd like the menu to have its own scrollbar.

Problem: The menu fits itself to the screen with a fixed position that is 0 pixels from all sides. However, even if I have a minimum height and an overflow: visible|auto property assigned to the menu, it still never shows its own scrollbar. Only the body one shows.

Example: http://jsfiddle.net/spryno724/fbhh15fo/ Try resizing the frame of the preview area to see what I mean.

Question: Anyone know how to get the menu to show its own scrollbar, if the screen height is too small. Again this menu has a fixed position which is 0 pixels from all sides.

Answer 1

This will make the menu max out at the viewport height.

Add

max-height: 100vh;

to the ul css section

ul {
    /* Lots of declarations */
    max-height: 100vh;
}

( Demo )

Answer 2

You need to change min-height to max-height in ul :

Before Change:

ul {
    background: #191919;
    bottom: 0;
    color: #EDEDED;
    left: 0;
    margin: 0;
    **min-height: 150px;**
    padding: 0;
    position: fixed;
    overflow: auto;
    right: 0;
    top: 0;
}

After Change :

ul {
    background: #191919;
    bottom: 0;
    color: #EDEDED;
    left: 0;
    margin: 0;
    **max-height: 150px;**
    padding: 0;
    position: fixed;
    overflow: auto;
    right: 0;
    top: 0;
}

JSFIDDLE DEMO

Answer 3

It turns out that by adding a media query, and specifying the height of the menu to 100% worked!

@media screen and (max-height: 380px) {
    ul.nav {
        min-height: 100%;
        overflow: auto;
    }
}