Position fixed and overflow-y:scroll issue

Question

I have read this question & answer: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue as well as a bunch of other conflicting use cases. I've tried applying different overflow types to different parents also. Nothing seems to get my use case working.

My Case

I have a full height fixed menu that will contain lots of links so if a browser isn't high enough to show them all I'd like to allow the user to scroll within the fixed div. Not a bold request.

How do I work around this issue, here's an example of the setup i'm using: http://jsfiddle.net/mz9abf43/9/

UPDATE

This is the updated fiddle with my full code for context, this is exactly how I want my menu to look but I just want to allow vertical scrolling if the screen height is smaller than the length of the menu. http://jsfiddle.net/mz9abf43/24/

Expected Output

The lines between each link should overflow to the right of the blue menu (like the image below) AND also allow the user to scroll within the blue menu. Currently I can only do one or the other.

My structure is:

<div id="fixed">
    <nav>
       <ul class="menu">
         <div class="drop">
             <li>Link here</li>
             <li>Link here
                 <ul>
                    <div class="drop">
                        <li>Link here</li>
                        <li>Link here</li>
                    </div>
                 </ul>
             </li>
             <li>Link here</li>
         </div>
       </ul>
    <nav>
</div>

My CSS is

#fixed {
        width:280px;
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        z-index: 1000;
        background: #fff;
}

.menu   {
        padding: 0;
        margin: 0;
        position: fixed;
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;
        width: 280px;

        /* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
        overflow-y: scroll;
        overflow-x: visible;

}

.menu .drop {
            background: #fff;
            height: 100%;
            z-index: 0;
}

Solution 1

Position:fixed can't be scrolled. When you set it with top:0 You are positioning the element to be always at the top of the window (not the container) and I'm afraid that's exactly what you will see, your ul always at the top of the window.

Probably better to use an absolute positioned if your menú may get many elements so you will get scroll bar on the body.

so as a starting point is You just need to chnage fixed for absolute and delete the bottom:0property:

.menu   {
        padding: 0;
        margin: 0;
        position: absolute;
        z-index: 9998;
        top:0;
        left:0;
        background: white;
        width: 280px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;                
    }

as in this FIDDLE

You now just need be sure the height of this menu is as "tall" as your content so it will fill all your window height. You can use a basic jquery:

var menuHeight = $('.content').outerHeight(true );
$('.menu').css({
    'height': menuHeight + 'px'
});

where you calculate the height of your "content" container and add it as a css property to your menu:

JSFIDDLE2

Note: I made this answer from my comments on the question. If you find any other problem feel free to comment here and I'll try my best to help (if I know how).

Solution 2

You should use box-sizing:border-box in .menu li a and make width: 70%; in .menu .drop.

.menu li a {
    color: #aaa;
    text-transform: uppercase;
    font-size:12px;
    padding: 8px 35px;
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid #f0f0f0;
    box-sizing:border-box;
}

UPDATE Fiddle

Comments

[egr103]

Forgive me if I have misunderstood this but this doesn't achieve the expected output as illustrated in my question?

[Mukul Kant]

Ohh no I am sorry @egr103 actually I was not getting properly, please check update fiddle, I hope it will helps you.

[egr103]

So what are the code changes you've made to get that jsFiddle working? Could you update the answer?

[Maximillian Laumeister]

Please elaborate on why this fixes the problem, so it will be useful to future readers. Thanks!

[egr103]

I'm afraid this hasn't worked. I don't quite understand how the width 70% would show the menus to the right?

[egr103]

Unfortunately no this hasn't worked, please see the section titled 'Expected Output' within my question. Unfortunately like the other answer by @Maddy this cuts off the arrow to the right. See updated question

[egr103]

Combined with CSS min-height media queries I managed to achieve what I wanted. Thus I applied position absolute to .menu for screen height less than 800px and for screens larger than this I applied position:fixed.