Controlling Overflow of Fixed Positioned Div

Question

Trying to show items out of fixed positioned div. As shown in the picture half of the menu items are hidden inside the div. The vertical overflow is set to scroll but the horizontal overflow is set to visible but no items are visible outside the box.

I am not sure if this is even possible?

body {
  background: #fefe
}
.bg-menu-container {
  background: black
}
.bg-menu-container {
    height: 140px;
    width: 200px;
position: relative;}

.bg-menu-container ul li a {
    display: inline-block
    padding: 10px 10px
    background: #dee
}

.bg-menu-container {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
overflow-x: visible;}

::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
}
.bg-menu-container .sub-menu {
 display: none;
  position: absolute;
    left: 140px;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.bg-menu-container ul li:hover .sub-menu {
    display: block;
}

<div class="bg-menu-container">
<ul>
<li><a href="#">  Home 00 </a><ul class="sub-menu">
<li><a href="#">  Sub-Home 00 </a></li>
<li><a href="#">  Sub-Home 01 </a></li>
<li><a href="#">  Sub-Home 02 </a></li>
<li><a href="#">  Sub-Home 03 </a></li>
</ul></li>
<li><a href="#">  Home 01 </a></li>
<li><a href="#">  Home 02 </a></li>
<li><a href="#">  Home 03 </a><ul class="sub-menu">
<li><a href="#">  Sub-Home 00 </a></li>
<li><a href="#">  Sub-Home 01 </a></li>
<li><a href="#">  Sub-Home 02 </a></li>
<li><a href="#">  Sub-Home 03 </a></li>
</ul></li>
</ul>
</div>
Please scroll ... 

Answer 1

emphasized text

is that what you want? Try not to use overflow and height to him

And the code here:

#myBody {
  background: #fefe
}
.bg-menu-container {
  background: black
}
.bg-menu-container {
    /* height: 140px; */
    width: 200px;
    position: relative;
    top: 0;
    left: 0;
    /* overflow-y: scroll; */
}

.bg-menu-container ul li a {
    display: inline-block;
    padding: 10px 10px;
    background: #dee;
}


::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
}
.bg-menu-container .sub-menu {
 display: none;
  position: absolute;
    left: 140px;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.bg-menu-container ul li:hover .sub-menu {
    display: block;
}

<template>
  <div id="myBody">
    <div class="bg-menu-container">
<ul>
<li><a href="#">  Home 00 </a><ul class="sub-menu">
<li><a href="#">  Sub-Home 00 </a></li>
<li><a href="#">  Sub-Home 01 </a></li>
<li><a href="#">  Sub-Home 02 </a></li>
<li><a href="#">  Sub-Home 03 </a></li>
</ul></li>
<li><a href="#">  Home 01 </a></li>
<li><a href="#">  Home 02 </a></li>
<li><a href="#">  Home 03 </a><ul class="sub-menu">
<li><a href="#">  Sub-Home 00 </a></li>
<li><a href="#">  Sub-Home 01 </a></li>
<li><a href="#">  Sub-Home 02 </a></li>
<li><a href="#">  Sub-Home 03 </a></li>
</ul></li>
</ul>
</div>
  </div>
</template>