I have been attempting to make the right floating menu scroll when overflowing, but so far, I have been unsuccessful. Here is the link to the JSFiddle demonstrating the issue: https://jsfiddle.net/xuwtqmj3/.
.menu {
position: fixed;
float: right;
right: 0;
top: 0;
background-color: #f0f0f0;
overflow: auto;
}
.menu-left {
float: left;
overflow: auto;
}<html>
<head>
<title>test</title>
</head>
<body>
<div class='menu'>
<span>Menu</span>
<div class="menu-left">
<span>111</span>
<ul>
<li>test</li>
<li>tttttt</li>
</ul>
...... more
<span>66</span>
<ul>
<li>test</li>
<li>tttttt</li>
</ul>
</div>
</div>
<div>
<pre>
asdfasdf
asdf
...... more
sfd
</pre>
</div>
</body>
</html>I have attempted to solve this issue by adding display: inline-block, but this did not work. I also tried wrapping the ul inside a span, but that did not work either.