After thoroughly researching this topic and reviewing various question & answer forums, including one on CSS overflow-x: visible; and overflow-y: hidden causing scrollbar issues, I am still unable to find a solution that works for my specific case. Even trying different overflow types on various parent elements has not yielded the desired result.
The Issue
I have a fixed menu with full height that contains numerous links. In cases where the browser window is not tall enough to display all the links, I need to implement scrolling within the fixed div to allow users access to all links.It should be a simple request.
How do I go about resolving this issue? Here's an example of the setup I am currently using: http://jsfiddle.net/mz9abf43/9/
UPDATE
This updated fiddle includes my complete code for better context. The visual appearance of my menu aligns with my requirements, but I specifically need vertical scrolling enabled if the screen height cannot accommodate the entire menu length. http://jsfiddle.net/mz9abf43/24/
Desired Outcome
The text lines between each link are intended to overflow to the right of the blue menu (as depicted in the image below) and concurrently permit user scrolling within the blue menu. Presently, achieving both tasks simultaneously proves challenging.
https://i.sstatic.net/BbYJl.png
My current structure consists of:
<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>
CSS Styling Used
#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;
/* ISSUES WITH SCROLLING - HOW CAN THIS BE FIXED? */
overflow-y: scroll;
overflow-x: visible;
}
.menu .drop {
background: #fff;
height: 100%;
z-index: 0;
}